MT Tech-Talk: A Discussion About Canvas

drawImageSpec.js

void drawImage(
	 (HTMLImageElement or HTMLCanvasElement or HTMLVideoElement) image
	,unrestricted double destinationX
	,unrestricted double destinationY
);
void drawImage(
	 (HTMLImageElement or HTMLCanvasElement or HTMLVideoElement) image
	,unrestricted double destinationX
	,unrestricted double destinationY
	,unrestricted double destinationW
	,unrestricted double destinationH
);
void drawImage(
	 (HTMLImageElement or HTMLCanvasElement or HTMLVideoElement) image
	,unrestricted double sourceX
	,unrestricted double sourceY
	,unrestricted double sourceW
	,unrestricted double sourceH
	,unrestricted double destinationX
	,unrestricted double destinationY
	,unrestricted double destinationW
	,unrestricted double destinationH
);

init.html

<canvas id="mah-canvas"></canvas>
<script>
    // Query the DOM for an existing canvas element, and grab its 2d context.
    var ctx = document
            .getElementById("mah-canvas")
            .getContext("2d")
        ;
</script>

init.js

// Create a new <canvas> element
var  canvas = ​document.createElement("canvas")
    ,ctx
    ;

// Add the newly created canvas element to the DOM
document.body.appendChild(canvas);

// Fetch the 2d context
ctx = canvas.getContext("2d");

init.webgl.js

<canvas id="threee-deeee-canvas"></canvas>
<script>
    // Alternatively you can do...
    var  canvas = document.getElementById("threee-deeee-canvas")
        ,ctx    = canvas.getContext("webgl") || 
                  canvas.getContext("experimental-webgl")
        ;
</script>

newImage.js

// Create a new image
var grass = new Image();

// Assign an onload callback
grass.onload = function () {
    document.body.appendChild(this);
};

// Assign the path
grass.src = "images/grass.png";

scaleRotateTranslate.js

void scale(
     unrestricted double x
    ,unrestricted double y
);
void rotate(
     unrestricted double angle
);
void translate(
     unrestricted double x
    ,unrestricted double y
);

shapes-cont.js

// Draw a box
ctx.fillStyle = "red";
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100, 0);
ctx.lineTo(100, 100);
ctx.bezierCurveTo(50, 50, 50, 50, 0, 100);
ctx.lineTo(0, 0);
ctx.fill();

// Draw a cross
ctx.fillStyle = "green";
ctx.beginPath();
ctx.moveTo(100, 0);
ctx.bezierCurveTo(150, 50, 150, 50, 200, 0);
ctx.bezierCurveTo(150, 50, 150, 50, 200, 100);
ctx.bezierCurveTo(150, 50, 150, 50, 100, 100);
ctx.bezierCurveTo(150, 50, 150, 50, 100, 0);
ctx.fill();

shapes.js

// Draw a circle
ctx.fillStyle = "rgb(200,0,0)";
ctx.beginPath();
ctx.arc(100, 100, 100, 0, Math.PI*2, true); 
ctx.closePath();
ctx.fill();

// Draw a transparent box
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (50, 50, 200, 200);

tiledGrass.js

var  canvas = document.getElementById("canvas")
    ,ctx    = canvas.getContext("2d")
    ,grass  = new Image()
    ;

grass.onload = function () {
    var  x,y
        ,xx = Math.ceil(canvas.width  / grass.width)
        ,yy = Math.ceil(canvas.height / grass.height)
        ;
    
    for (y = 0; y < yy; y += 1) {
        for (x = 0; x < xx; x += 1) {
            ctx.drawImage(
                 grass
                ,grass.width  * x
                ,grass.height * y
            );
        }
    }
};

grass.src = "images/grass.png";

whileTrueEqualDOOOM.js

while (true) {
    ...
}