JSFiddle - React, Tailwind, and code Playground

by Alex Baumgertner

HTML

<canvas id="canvas_type_fill-rect" width="150" height="150"></canvas>

<canvas id="canvas_type_stroke-rect" width="150" height="150"></canvas>

CSS

canvas {
  display: block;
  margin: 15px;
}

#canvas_type_fill-rect {
  border: 5px solid #FFA199;
}

#canvas_type_stroke-rect {
  border: 5px solid #FFA100;
}

JavaScript

/**
* Canvas DOM-element
*
* @see https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
*/
var canvasFillRect = document.getElementById('canvas_type_fill-rect');

console.log('canvasFillRect: ', canvasFillRect);

/**
* Interface 
*
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
*/
var canvasFillRectCtx = canvasFillRect.getContext('2d');

// see docs for more info and examples 
// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle
canvasFillRectCtx.fillStyle = '#00539f';


/**
* draws a filled rectangle at (x, y) position (by default: top left corner)
* `width` and `height` size 
* style is `fillStyle` attribute.
* 
* @example 
ctx.fillRect(x, y, width, height);

* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect
*/
canvasFillRectCtx.fillRect(10, 10, 100, 100);


var canvasStrokeRect = document.getElementById('canvas_type_stroke-rect');

console.log('canvasStrokeRect: ', canvasStrokeRect);

var canvasStrokeRectCtx = canvasStrokeRect.getContext('2d');

// @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle
canvasStrokeRectCtx.strokeStyle = 'rgba(255, 0, 0, 0.2)';

// @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineWidth
canvasStrokeRectCtx.lineWidth = 30; //px

/**
* Paints a rectangle which has a starting point at (x, y) 
* and has `width` and an `height` onto the canvas, 
* using the current stroke style `strokeStyle`.
*
*
* @example 
* ctx.strokeRect(x, y, width, height);
*
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeRect
*/
canvasStrokeRectCtx.strokeRect(0, 0, 150, 150);