Graphics PRIMER

by brouser

HTML

<h1>Canvas Element Demo</h1>
<canvas id = "myCanvas" width = "400" height = "400">
Sorry, your browser doesn't support canvas elements!
</canvas>

CSS

canvas {
  border: 3px dotted blue;
}

JavaScript

// these two variables are always needed
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");


// create a red filled rectangle @ (20, 20)
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);


// create a blue outlined rectangle @ (190, 20)
ctx.strokeStyle = "blue";
ctx.strokeRect(190, 20, 150, 100);


// create a green filled circle center @ (95, 150)
ctx.fillStyle = "green";
ctx.beginPath();
ctx.arc(95, 150, 50, 0, Math.PI * 2, false);
ctx.fill();


// create an orange outlined circle center @ (265, 150)
ctx.strokeStyle = "orange";
ctx.beginPath();
ctx.arc(265, 150, 50, 0, Math.PI * 2, false);
ctx.stroke();


// create filled color text starting at (25, 275)
ctx.font = "30px serif";
ctx.fillText("Get REKT!!", 25, 275);


// create stroke outline text starting at (25, 325)
ctx.font = "30px sans-serif";
ctx.strokeText("Get ROASTED!", 25, 325);