JSFiddle - React, Tailwind, and code Playground

by frogggeee McFrogggeee

HTML

<!DOCTYPE html>
<html>
<head>
<body>
<h1>sandwich maker</h1>
<canvas id = "canvas" Width = "400" height = "400"></canvas>
<script>
let theCanvas = document.getElementById("canvas");
let ctx = theCanvas.getContext("2d");
let ingredients = ["ham", "cheese", "pickles", "lettuce", "mustard", "tomato"];
let sandwich = ["bread"];
let y = 330;
let bread = new Image();
bread.src = "https://purepng.com/public/uploads/large/purepng.com-toastbreadslicebakedfooddeliciouseatingbreakfast-21526086375mlkhx.png";
let ham = new Image();
ham.src = "https://cdn.schlotzskys.com/-/media/schlotzskys/ingredients/hamslice-400.png?v=1&d=20180213T144104Z";
let cheese = new Image();
cheese.src = "https://www.mcdonalds.com/content/dam/usa/nutrition/ingredients/regular/ingredient_american_cheese_180x180.png";
let pickles = new Image();
pickles.src = "http://gyrostreetmn.com/wp-content/uploads/2017/07/pickles.png";
let lettuce = new Image();
lettuce.src = "http://www.stickpng.com/assets/images/585ea506cb11b227491c3525.png";
let tomato = new Image();
tomato.src = "https://www.thecrucialsaucecompany.co.uk/img/home/tomato.png";
for (let i = 0; i < 8; i++) {
	sandwich.push(ingredients[Math.floor(Math.random() * ingredients.length)]);
}
sandwich.push("bread");
ctx.beginPath();
ctx.rect(0, 0, 400, 400);
ctx.fillStyle = "black";
ctx.fill();
ctx.closePath(); // */
ctx.drawImage(bread, 0, 0, 2298, 2521, 130, 350, 2298 / 20, 2521 / 70);
let g = 0;
for (i = 0; i < sandwich.length; i++) {
    if (sandwich[i] == "ham") {
        ctx.drawImage(ham, 0, 0, 400, 400, 140 + Math.floor(Math.random() * 10) - 5, y + Math.floor(Math.random() * 10) - 5, 400 / 5, 500 / 4);
    } else if (sandwich[i] == "tomato") {
    for (g = 0; g < 6; g++) {
        ctx.drawImage(tomato, 0, 0, 452, 456, 140 + Math.floor(Math.random() * 50), y + Math.floor(Math.random() * 50), 452 / 10, 456 / 30);
        }
    } else if (sandwich[i] == "lettuce") {
        ctx.drawImage(ham, 0, 0, 400, 400, 140 + Math.floor(Math.random() * 10) - 5,...