Practicing Canvas

by Mohammed Ismail Ansari

HTML

<canvas id="niceCanvas" width="400px" height="300px"></canvas>

CSS

#niceCanvas
{
    border: 1px dotted Gray;
}

JavaScript

$(main);
function main() {
    var niceCanvas = $("#niceCanvas")[0];
    console.log(niceCanvas);
    var myContext = niceCanvas.getContext("2d");
    
    myContext.fillRect(50, 50, 100, 30);
    
    myContext.moveTo(0, 0);
    myContext.lineTo(150, 150);
    myContext.stroke();
    
    myContext.fillText("this is the text", 250, 250);
}