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.textAlign = “center”;
myCanvas_context.textBaseline = “middle”;
myCanvas_context.fillStyle = “#000”;
myCanvas_context.font = “bold 36px sans-serif”;
myCanvas_context.fillText(“Howdy”, 150, 150);
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