Rendering shapes in Canvas using objects
In a previous blog post (Painting using Canvas and JS), I explained how to paint a figure using canvas. I explained how to paint the figure inside a single function by setting coordinates and calling stroke and fill. In the following post, (Create an interactive HTML5 Canvas using event handlers.) I presented the clickable area as an object. In this, post I am going to start up by combining the two like the snippet below. I create an object called CustFigure. It has X and Y values and a height and width. This is all we need in order to place it in the grid and to get the size of the figure, say a box. var CustFigure = function (x, y, height, width, label ) { this.x = x; this.y = y; this.height = height; this.width = width; this.label = label; }; function DrawShape(Shape){ var rectWidth = Shape.width; var rectHeight = Shape.height; var rectX = Shape.x; var rectY = Shape.y; renderContext.beginPath(); renderContext.fillRect(r...