<h2>jCanvas example: Rectangle</h2>

<canvas id="myCanvas" width="600" height="300">
  <p>This is fallback content for users of assistive technologies or of browsers that don't have full support for the Canvas API.</p>
body {
  text-align: center;

canvas {
  margin: auto;
  display: block;
// Store the canvas object into a variable
var $myCanvas = $('#myCanvas');

// rectangle shape 
  fillStyle: 'steelblue',
  strokeStyle: 'blue',
  strokeWidth: 4,
  x: 190,
  y: 50,
  fromCenter: false,
  width: 200,
  height: 100

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/jcanvas.15.12.12.min.js