HTML and CSS Reference
In-Depth Information
function doCanvas() {
var my_canvas = document.getElementById(“myCanvas”);
var myCanvas_context = my_canvas.getContext(“2d”);
myCanvas_context.strokeStyle = “#000000”;
myCanvas_context.fillStyle = “#FFFF00”;
myCanvas_context.beginPath();
myCanvas_context.arc(150,150,100,0,Math.PI*2,true);
myCanvas_context.closePath();
myCanvas_context.stroke();
myCanvas_context.fill();
myCanvas_context.textAlign = “center”;
myCanvas_context.textBaseline = “middle”;
myCanvas_context.fillStyle = “#000”;
myCanvas_context.font = “bold 36px sans-serif”;
myCanvas_context.fillText(“Howdy”, 150, 150);
}
</script>
FiGure 28-9
Placing images on the canvas
Drawing programmatically with basic elements such as lines, rectangles, and circles — and even
adding text — will get you only so far. There is a wealth of existing artwork, with more created
every day, to utilize as well. Happily, the <canvas> tag JavaScript API makes it possible to include
any web-compatible image on your canvas.
The first step in placing an image via the <canvas> tag is to create a new Image() object, like this:
var bobcat = new Image();
Search WWH ::




Custom Search