JSFiddle - React, Tailwind, and code Playground

by Farzad Cyrus

HTML

<!-- <canvas id="myCanvas" width="300" height="300"> -->
<div class="image">
</div>

CSS

body {
  background: #dd0044;
}

JavaScript

/*var canvas = document.getElementById("myCanvas");*/
var canvas = document.createElement('canvas');
var context = canvas.getContext("2d");

var image = new Image();

var direction = 'right';
var createGradient;
var gradientColour = '#dd0044';
switch (direction) {
  case 'top':
    createGradient = context.createLinearGradient(0, 0, 0, 300);
    break;
  case 'right':
    createGradient = context.createLinearGradient(300, 0, 0, 0);
    break;
  case 'bottom':
    createGradient = context.createLinearGradient(0, 300, 0, 0);
    break;
  case 'left':
    createGradient = context.createLinearGradient(0, 0, 300, 0);
    break;
}

image.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
image.onload = function() {
  context.drawImage(image, 0, 0);

  //var gradient = createGradient;
  createGradient.addColorStop(0, gradientColour);
  createGradient.addColorStop(1, "transparent");

  context.fillStyle = createGradient;
  context.fillRect(0, 0, 300, 300);

};

document.querySelector(".image").appendChild(canvas);



/*
for (var i = 1; i <= 10; i++) {

  var alpha = i * 0.1;
  ctx.globalAlpha = alpha;

  ctx.fillRect(50 * i, 20, 40, 40);
}
*/



/*
var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var imageObj = new Image();

      imageObj.onload = function() {
        context.drawImage(imageObj, 69, 50);
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
      */