29 lines
778 B
JavaScript
29 lines
778 B
JavaScript
// Set up the canvas
|
|
var canvas = document.createElement("canvas"),
|
|
ctx = canvas.getContext("2d"),
|
|
width = 400, height = 400;
|
|
|
|
ctx.canvas.width = width;
|
|
ctx.canvas.height = height;
|
|
|
|
// Optionaly add it to the current page
|
|
document.body.appendChild(canvas);
|
|
|
|
// Draw an image
|
|
var img = document.createElement("img");
|
|
img.onload = function(){
|
|
// Draw the element into the top-left of the canvas
|
|
ctx.drawImage(img, 0, 0);
|
|
};
|
|
img.src = "//placehold.it/400x400";
|
|
|
|
// Fill the canvas with a solid blue color
|
|
ctx.fillStyle = "blue";
|
|
ctx.fillRect(0, 0, width, height);
|
|
|
|
// Place a black pixel in the middle
|
|
// Note that a pixel is a 1 by 1 rectangle
|
|
// This is the fastest method as of 2012 benchmarks
|
|
ctx.fillStyle = "black";
|
|
ctx.fillRect(width / 2, height / 2, 1, 1);
|