Canvas Examples-Intersecting rectangles

Here is a simple example using a canvas that can be used to draw two intersecting rectangles.

The following sample code is indicated by.

The draw function gets the canvas element, at that point gets the 2d setting. The ctx question would then be able to be utilized to really render to the canvas. The precedent basically fills two square shapes, by setting fillStyle to two unique hues utilizing CSS shading particulars and calling fillRect. The second fillStyle utilizes rgba() to determine an alpha incentive alongside the color.

The fillRect, strokeRect, and clearRect calls render a filled, outlined, or clear rectangle. To render more complex shapes, paths are used.