JSFiddle - React, Tailwind, and code Playground

by pinkLucie

HTML

<div id="wrapper">

  
<p><canvas id="canvas1"></canvas></p>
    
</div><!-- end wrapper -->

CSS

canvas {
 width: 402px;
 height: 402px;
 border: thin black solid;   
}

JavaScript

//this is the processing sketch object
function sketch(processing) {
  
  var p = processing;
  
          var url = "http://www.biography.com/imported/images/Biography/Images/Profiles/E/Albert-Einstein-9285408-1-402.jpg"
  
  var img;
  
 
  p.setup = function() {
    p.size(402, 402);
    
    img = p.loadImage(url);       
  };
    
 
  p.draw = function() {
      
     p.image(img, 0, 0, p.width, p.height); 
  };
}


// grab the canvas element from the page
var canvas = document.getElementById("canvas1");

// atach the sketch function to the canvas
var p = new Processing(canvas, sketch);