I have an array of canvas tags being dynamically filled with image data, and I need to analyze the image data of the canvases for debugging. How may I view these in memory?
I can obviously paint them to an on-screen canvas, however that would be very time consuming and I'm looking for a solution similar to viewing variables in Chrome's watch list.
EDIT: I need to view the canvas data visually, rather than textually. I was asking for a way to do this without manually drawing the data of the in-memory canvases onto an on-screen canvas to save time. For example, in Firefox's developer toold, if you hover the source of an image or the CSS for the URL of an image, it shows a small tooltip with the image
I wanted something similar for the in-memory canvases
Create a large on-screen canvas and use the scaling version of context.drawImage to draw multiple down-sized in-memory canvases to the on-screen canvas. You can view 4,6,8 smaller canvases at once on the big canvas. Kind of like the quad-screen security camera displays.
[ Addition based on comment (and request for clarification) ]
I don't know a way to do what you ask.
A canvas is not a variable. It's basically a bitmap.
If you want to view the pixel data you can use context.getImageData. What you would see is thousands of array elements all with values between 0-255.
Here's an example of the pixel data of an image:
3,45,117,255,2,46,119,255,4,48,123,255,2,49,127,255,3,51,133,255,2,52,137,255,2,54,140,255,1,55,143,255,7,74,152,255,8,71,148,255,7,69,146,255,5,69,141,255,5,74,143,255,2,82,145,255,1,92,149,255,0,97,152,255,31,92,175,255,15,86,174,255,0,79,99,255,0,48,121,255,10,30,177,255,21,35,144,255,1,33,134,255,0,46,155,255,0,44,174,255,0,57,120,255,0,51,121,255,0,37,167,255,9,50,156,255,2,52,125,255,15,67,168,255,0,53,162,255,15,71,168,255,4,63,153,255,1,62,145,255,14,69,152,255,9,64,155,255,9,83,182,255,14,121,225,255,0,124,232,255,11,120,223,255,11,124,228,255,7,124,229,255,2,123,228,255,8,131,235,255,16,138,239,255,10,130,227,255,0,115,209,255,2,123,238,255,0,123,233,255, ... and on for thousands of elements more.
If this is what you need, here's how to get it:
var img=new Image();
img.onload=start;
img.src="yourImageSource";
function start(){
canvas.width=img.width;
canvas.height=img.height;
ctx.drawImage(img,0,0);
var a=ctx.getImageData(0,0,cw,ch).data;
var t="";
var comma="";
for(var i=0;i<a.length;i++){
t+=comma+a[i];
comma=",";
}
console.log(t);
}
If that's not what you want, perhaps you could edit your question and better explain your need?
In HTML5, using the canvas object you can draw an image.
context.drawImage(imageObj, x, y);
How does this work under the hood? Is the browser drawing pixels or using svg? I do not see any svg elements being added to the dom, so I am assuming the browser is drawing pixels, but how does it accomplish this all? Is there a library that the browser is using?
For the sake of discussion I guess we could just consider Webkit, but I would also be interested in what other browsers (IE) do.
Canvas is a pixel-based interface, SVG is a markup-language for vector graphics, they are two very separate things.
If you add an image to canvas it loads it first into the dom and then renders it to the canvas.
You can use SVG in conjunction with Canvas though. Say you wanted your canvas app to scale, you could simply rerender your svg files in different sizes to the canvas like described here
Because SVG-graphics can be used like images, they can just be rendered onto canvas like images.
If you want to have more in depth knowledge about canvas just read the spec
Well...you asked!
Think of canvas as a big, living bitmap...and here are the details:
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html
I'm new to HTML5 and JavaScript, and I'm trying to use the canvas element to create a high(ish) quality output image.
The current purpose is to allow users to all their own images (jpeg, png, svg). this works like a charm. however when I render the image it's always a 32-bit png. how can I create a higher quality picture using JavaScript(preferably) ?
when I output the file, it always seems to keep the same resolution as the canvas, how can I change this using JavaScript(preferably)
Thanks in Advance guys, I looked around for a while but I couldn't find the answer to this :(
If you want to create a larger image with getImageData or toDataURL then you have to:
Create an in-memory canvas that is larger than your normal canvas
Redraw your entire scene onto your in-memory canvas. You will probably want to call ctx.scale(theScale, theScale) on your in-memory context in order to scale your images, but this heavily depends on how they were created in the first place (images? Canvas paths?)
Call getImageData or toDataURL on the in-memory canvas and not your
normal canvas
By in-memory canvas I mean:
var inMem = document.createElement('canvas');
// The larger size
inMem.width = blah;
inMem.height = blah;
Well firstly, when you draw the image to the canvas it's not a png quite yet, it's a simple raw bitmap where the canvas API works on as you call it's methods, then it's converted to a png in order for the browser to display it, and that's what you get when you use toDataURL. When using toDataURL you're able to choose which image format you want the output to be, I think jpeg and bmp are supported along with png. (Don't think of it as a png converted to another format, cause it's not)
And I don't know what exactly do you mean by higher quality by adding more bits to a pixel, you see 32 bits are enough for all RGBA channels to have a true color 8 bits depth giving you way more colors than the human eye can see at once. I know depending on the lighting and angle in which the user is exposed to your picture his perception of the colors may vary but not the quality of it which I'd say only depends on the resolution it has. Anyway the canvas was not designed to work with those deeper colors and honestly that much color information isn't even necessary on any kind of scene you could render on the canvas, that's only relevant for high definition movies and games made by big studios, also, even if you could use deep colors on the canvas it would really depend on the support of the user's videocard and screen which I think the majority of people doesn't have.
If you wish to add information not directly concerned to the color of each pixel but maybe on potencial transformations they could have you better create your own type capable of carrying the imageData acceptable by the canvas API, keeping it's 32-bit format, and the additional information on a corresponding array.
And yes, the output image has the same resolution as the canvas do but there are a couple of ways provided for you to resize your final composition. Just do as Simon Sarris said, create an offscreen canvas which resolution is the final resolution you want your image to be, then, you can either:
Resize the raster image by calling drawImage while providing the toDataURL generated image making use of the resizing parameters
Redraw your scene there, as Simon said, which will reduce quality loss if your composition contains shapes created through the canvas API and not only image files put together
In case you know the final resolution you want it to be beforehand then just set the width and height of the canvas to it, but the CSS width and height can be set differently in order for your canvas to fit in your webpage as you wish.
I want to know how I can translate an entire scene already drawn on an html5 canvas, for example 5 pixels down. I know the translate method just translates the canvas' coordinate system, but I want to know if there is a way to translate the entire scene that is already drawn onto the canvas.
You can apply the transforms and call drawImage passing in the canvas itself.
ctx.save();
ctx.translate(0, 5);
ctx.drawImage(canvas, 0, 0);
ctx.restore();
When doing that, the original contents will still be below.
Depending on the effect you're trying to accomplish, setting the globalCompositeOperation may help you with that.
But it's likely you'll need to use drawImage to first copy to a second canvas, clear the current, apply the transform and draw from the copy.
Not unless you take a screenshot and translate that.
However, just inserting
context.translate(0, 5)// or your values
right before your drawing code should do the trick.
Reference: MDN Canvas Tutorial (Transformations)