JSFiddle - React, Tailwind, and code Playground

by DeadByElpy

HTML

<p>
  Image to use:</p>
<img id="scream" width="200" height="200" src="https://s1.postimg.org/2o9z81juyn/download.png" alt="The Scream">

<p>Canvas:</p>
<canvas id="myCanvas" width="220" height="220" style="border:1px solid #d3d3d3;">
  Your browser does not support the HTML5 canvas tag.
</canvas>
<div>
  <canvas id="c8" width="200" height="200" style="border:solid 1px #000000;"></canvas>
</div>

JavaScript

(function() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("scream");
  var pic = new Image();
  console.log(pic);
  pic.addEventListener('load', function() {
    ctx.drawImage(this, 10, 10);
  });
  pic.src = 'https://s1.postimg.org/2o9z81juyn/download.png';

  var c8 = document.getElementById("c8");
  var c8_context = c8.getContext("2d");

  function draw_rectangle() {
    c8_context.shadowOffsetX = 5;
    c8_context.shadowOffsetY = 5;
    c8_context.shadowBlur = 10;
    c8_context.shadowColor = "DarkGoldenRod";
    c8_context.fillStyle = "Gold";
    c8_context.fillRect(20, 20, 100, 120);
  }
  draw_rectangle();
})()