JSFiddle - React, Tailwind, and code Playground

by soggydoughnut54

HTML

<canvas width="500" height="500" id="myCanvas"></canvas>

CSS

#myCanvas {
    border: 1px solid #000;
}

JavaScript

/*************
variables to make program work
*************/
//access the canvas
var canvas = document.getElementById('myCanvas');
//access drawing environment
var context = canvas.getContext("2d");
//create a new image
var space = new Image();
space.src = "https://i.postimg.cc/DyNVWvJm/space.jpg";
//variables for rectangles
var x = 0;
var y = 0; 
var width = 0;
var height = 0;
/***********
function for drawing stuff
ALL OF YOUR CODE GOES HERE vvvv
************/
function draw(){
	context.fillStyle="Maroon";
  context.fillRect(0, 0, 500, 500);
  context.fillStyle = "Cyan";
  Context.fillRect(50, 50, 200, 200);
  //animate
 
  context.drawImage(space, 100, 100, 100, 100);
}
 
/************
Call the function
************/
draw();