JSFiddle - React, Tailwind, and code Playground

by Spsoi

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <canvas id ="tutorial" width="1000" height="1000"></canvas>
    <script src="canvas.js"></script>
</body>
</html>

CSS

canvas{
    border: 1px solid black;
}

JavaScript

let ctx = null;
let elements = [ // элементы для отрисовки
    {
        name: '1',
        color: 'blue',
        width: 100,
        height: 100,
        top: 20,
        left: 15
    },
    {
        name: '2',
        color: 'red',
        width: 100,
        height: 100,
        top: 50,
        left: 125
    },
    {
        name: '3',
        color: 'yellow',
        width: 100,
        height: 100,
        top: 150,
        left: 185
    },
    {
        name: '4',
        color: 'green',
        width: 100,
        height: 100,
        top: 300,
        left: 235
    },
];


function initialization() { // точка входа
    canvas = document.getElementById('tutorial'); // Получаем тэг Канвас
    if (canvas.getContext) { // проверка
        ctx = canvas.getContext('2d');
        draw();
    }

}

function draw () {
    canvas = document.getElementById('tutorial');
        elements.forEach (function(element){ // отрисовка элемента
            ctx.fillStyle = element.color;
            ctx.fillRect(element.left, element.top, element.width, element.height);
        });
}
initialization();