HTML and CSS Reference
In-Depth Information
if (adCanvas.getContext) {
// Initialize a 2d drawing context.
var ctx = adCanvas.getContext(“2d");
// Draw on the Canvas
var img = new Image();
}
5.
Attach a function to the
onload
event of the
Image
object.
if (adCanvas.getContext) {
// Initialize a 2d drawing context.
var ctx = adCanvas.getContext(“2d");
// Draw on the Canvas
var img = new Image();
img.onload = function() {
}
}
6.
Inside this function, write a call to the
drawImage()
function that will add your image to the canvas.
if (adCanvas.getContext) {
// Initialize a 2d drawing context.
var ctx = adCanvas.getContext(“2d");
// Draw on the Canvas
var img = new Image();
img.onload = function() {
ctx.drawImage(img,0,0);
}
}
7.
Underneath
drawImage()
, add the call to your
drawAdvert()
function.
if (adCanvas.getContext) {
// Initialize a 2d drawing context.
var ctx = adCanvas.getContext(“2d");
// Draw on the Canvas
var img = new Image();
img.onload = function() {
ctx.drawImage(img,0,0);
drawAdvert();
}
}
8.
After the event listener, set the
src
property of your
Image
object to
background.png
.
if (adCanvas.getContext) {
// Initialize a 2d drawing context.
var ctx = adCanvas.getContext(“2d");
// Draw on the Canvas
var img = new Image();
img.onload = function() {
ctx.drawImage(img,0,0);
drawAdvert();
}
img.src = “background.png";
