Canvas is a scriptable image. You define its dimensions like a standard img tag, e.g.
<canvas id="mycanvas" width="200" height="200">
Sorry, but your browser does not support canvas.
</canvas>
then draw within that area using a JavaScript API. For example, to draw a blue square which is 180px in dimension at a point 10 pixels down and across:
var canvas = document.getElementById("mycanvas");
if (canvas.getContext) {
var ctx = mycanvas.getContext("2d");
ctx.fillStyle = "rgb(0,0,255)";
ctx.fillRect(10, 10, 180, 180);
}
The browser has no access to the resulting shapes once they’ve been drawn. If you wanted to bounce the square around the canvas, you need to repeatedly clear and redraw the shape. However, the current image can be saved using ctx.toDataURL() which returns a PNG-encoded representation.
