JSFiddle - React, Tailwind, and code Playground

HTML

<!-- создаем canvas -->
<canvas width="400" height="400" id="draw-place"></canvas>

JavaScript

// создаем штуку для рисования..
var ctx = document.getElementById("draw-place").getContext("2d");

// рисуем прямоугольник
ctx.fillRect(10,10,20,20);

// меняем цвет
ctx.fillStyle = "red";
ctx.fillRect(20,20,20,20);

// рисуем круг
ctx.strokeStyle = "blue"; // обводка
ctx.lineWidth = 5; // толщина обводки

ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke(); // рисуем обводку
ctx.fill();  // заливаем

var img = new Image();
img.src = "https://i.pinimg.com/474x/e1/e3/e8/e1e3e89d8fb90d363e8a6cc5f721642d--kyler-moss-crushes.jpg";
img.onload = function() {
	ctx.drawImage(img, 50, 200); // после загрузки изображения рисуем его
}