#canvas api

Introduction to jCanvas: jQuery Meets HTML5 Canvas

HTML5 allows you to draw graphics straight into your net web page utilizing the <canvas> element and its associated JavaScript API.

On this submit, I’m going to introduce you to jCanvas, a free and open supply jQuery-based mostly library for the HTML5 Canvas API.

For those who develop with jQuery, jCanvas makes it simpler and faster to code cool canvas drawings and interactive purposes…

Remember Unless Specified the Default Color is Always Black

To draw a line using HTML5 Canvas, we can use the beginPath(), moveTo(), lineTo(), and stroke() methods.

First, we can use the beginPath() method to declare that we are about to draw a new path.

Next, we can use the moveTo() method to position the context point.(i.e.) and then use the lineTo() method draw a straight line using stroke().

var canvas = document.getElementById('myCanvas'); // Targeting the Canvas Element Using the DOM's API var context = canvas.getContext('2d'); // Creating the Context Element Using the Canvas API context.beginPath(); // Function to begin a Path  context.moveTo(100, 150); context.lineTo(450, 50); // JavaScript Syntax context.lineTo(x,y) context.stroke(); // Context to Stroke or in other words fill in the Path