Video Tutorial
Basic Shapes
So far in the HTML5 Canvas Series we have covered the working space setup and rendering a very basic rectangular with the canvas API, there still a few shapes we need to cover before jumping into creating crazy effects using the power of the canvas API.
So with the canvas API you can draw any shape you would like to from basic one into custom complicated shapes (for e.x: Heart
), so canvas gives us a very easy to use methods to manipulate our shapes rendering.
So here is the basic method for rendering the well-known shapes
here are a few common notes
ctx ///< is our default rendering context
beginPath() and ClosePath ///< are used to tell where the shape begins and ends
Rectangular
ctx.beginPath();
ctx.rect(5, 5, 200, 140); ///< X-POS, Y-POS, width, height
ctx.strokeStyle = 'red'; ///< specify a stroke color for the rectangular, that assumes that you are goin to use the stroke() method for rendering
ctx.stroke();
ctx.closePath(); ///< Optional!
//for a filled rectangular, use
ctx.fill();
// and
ctx.fillStyle = 'red';
//For Styling
Circle
ctx.beginPath();
ctx.arc(5, 5, 0, Math.PI * 2, false); /*< X-POS, Y-POS, Starting Point(rads), ending point, clock wise */
ctx.strokeStyle = 'red'; /* < specify a stroke color for the rectangular, that assumes that you are goin to use the stroke() method for rendering */
ctx.stroke();
ctx.closePath(); ///< Optional!
//for a filled rectangular, use
ctx.fill();
// and
ctx.fillStyle = 'red';
//For Styling
Custom Shapes (using connected lines)
ctx.beginPath();
ctx.moveTo(75, 50); ///< move into new pos, X-POS, Y-POS
ctx.lineTo(100, 75); ///< Draw a line to X-POS, Y-POS
ctx.lineTo(100, 25);
//this will render us a Triangle :)
ctx.strokeStyle = 'red'; ///< specify a stroke color for the rectangular, that assumes that you are goin to use the stroke() method for rendering
ctx.stroke();
ctx.closePath(); ///< Optional!
//for a filled rectangular, use
ctx.fill();
// and
ctx.fillStyle = 'red';
//For Styling
Text
ctx.beginPath();
ctx.font = '20px sans-serif'; ///< The Font-Size and Font-Family for text
ctx.strokeStyle = 'red'; ///< specify a stroke color for the rectangular, that assumes that you are
ctx.fillText('Hello World!', 200, 150); ///< Text-to-render, X-POS, Y-POS
//or
ctx.strokeText(); ///< with the same parameters
ctx.closePath(); ///< Optional!
//for a filled rectangular, use
ctx.fill();
// and
ctx.fillStyle = 'red';
//For Styling
So that was all the shapes that you can render using the Canvas API.
for custom shapes, you can use the connected line in order to draw a full shape.
What’s Next
So this tutorial was just for rendering a basic shape using the HTML5 Canvas API, in the next tutorials we are going to create something really nice with the methods above and a few other techniques.