Canvas introduction

by Vico Bertogli III

HTML

<div id="container">
    <canvas id="theCanvas" width="200" height="100" style="border:5px solid #000000;"></canvas>
</div>

SCSS

#container {
    width:100%;
    height:100%;
    position:relative;
    padding:15%;
    box-sizing:border-box;

    canvas {
        display:block;
        margin:0px auto;
    }
}

JavaScript

var cvs = document.getElementById('theCanvas');
var ctx = cvs.getContext('2d');

//draw a red rectangle in the center of canvas ele
ctx.fillStyle = "#FF0000";
ctx.fillRect(25, 5, 150, 90); //left, top, width, height

//draw a line
ctx.lineWidth = 2.5;
ctx.moveTo(25, 5);
ctx.lineTo(175, 95); //x, y
ctx.stroke();

//draw a white circle
ctx.fillStyle = "#FFFFFF";
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
ctx.fill();

//lastly, add text
ctx.fillStyle = "#000000";
ctx.font = "30px Arial";
ctx.textAlign = "center";
ctx.fillText("V",95,65);