JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<canvas id="canvas"></canvas>

CSS

canvas {
  background: #fff;
}

JavaScript

var canvasApp = {
  'setup': {
  	'id':'canvas',
    'canvasWidth': 800,
    'canvasHeight': 600,
    'ctx': null
  },
  'init': function() {
    var canvas = document.getElementById(this.setup.id);
    canvas.width = this.setup.canvasWidth;
    canvas.height = this.setup.canvasHeight;
    this.setup.ctx = canvas.getContext('2d');
    this.constructCanvas();
  },
  'createRect': function(x, y, w, h, color) {
    this.setup.ctx.fillStyle = color;
    this.setup.ctx.fillRect(x, y, w, h);
  },
  'loadImage':function(imageLink){
  	var img = new Image();
    img.onload = function(){
    	canvasApp.setup.ctx.drawImage(this,0,0);
    };
    img.src = imageLink; 
  },
  'constructCanvas':function(){
  	this.loadImage('http://coral.local/cat.jpg');
    
  }
}

canvasApp.init();