In this recipe, we'll learn how to perform the most basic and commonly used transformation available with the HTML5 canvas API—translation. If you're unfamiliar with transformation terminologies, "translation" is just a fancy way of saying "move". In this case, we'll be moving the context to a new location on the canvas.
Follow these steps to draw a translated rectangle moved to the center of the canvas:
Define the canvas context and the dimensions for the rectangle:
window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var rectWidth = 150; var rectHeight = 75;
Translate the context to the center of the canvas:
// translate context to center of canvas context.translate(canvas.width / 2, canvas.height / 2);
Draw a rectangle whose center lies on the top-left corner of the translated canvas context:
context.fillStyle = "blue"; context.fillRect(-rectWidth...