Как добавить класс внутри объекта canvas jQuery

Question

Я работаю с холстом, и у меня есть проблемы, я хочу создать макет с объектами холста. Но я хочу создать объект в css и создать в HTML.

Сейчас я создаю:

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.beginPath();


context.rect(10, 50, 200, 100);
context.fillStyle = 'red';
context.fill();
context.fillStyle = 'black';
context.font = '20px Courier';
context.shadowColor = 'transparent';
context.shadowBlur = 0;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.fillText(`List item`, 70, 80);
context.fillText(`List item2`, 70, 130);

var image = new Image();
image.src = "https://pngimage.net/wp-content/uploads/2018/06/machine-icon-png-9.png";
image.onload = function () {
    context.drawImage(image, 10, 70, 50, 50);
};

CSS:

.box-test {
    width: 150px;
    height: 100px;
    background-color: #fff;
}

HTML:

 <canvas id="myCanvas" width="1280" height="720"
            style="border:1px solid #c3c3c3;">
        Your browser does not support the canvas element.
    </canvas>

Этот код представляет собой блоки компоновки с изображением и текстом, но цвет, изображение, которое я хочу получить из CSS, каким-то образом можно создать объект на холсте, используя стили css ?

Как вы можете видеть, у меня есть класс box-test , и здесь я даю свойства box:

context.rect(10, 50, 200, 100);
    context.fillStyle = 'red';
    context.fill();

Могу ли я использовать здесь только кординаты, и ширина, высота, цвет получить от css?

Answer 1

Если вы используете SVG, вы можете на лету добавлять к нему элементы

var canvas = document.getElementById("svgArea");
var rec = document.createElementNS("http://www.w3.org/2000/svg","rect")
rec.setAttributeNS(null, "class","box-test");
canvas.appendChild(rec);

var image = document.createElementNS("http://www.w3.org/2000/svg","image")
image.setAttributeNS(null, "href","https://pngimage.net/wp-content/uploads/2018/06/machine-icon-png-9.png");
image.setAttributeNS(null, 'height', '50');
image.setAttributeNS(null, 'width', '50');
image.setAttributeNS(null, 'x', 60);
image.setAttributeNS(null, 'y', 60); 
canvas.appendChild(image );

var text = document.createElementNS("http://www.w3.org/2000/svg","text");
text.textContent= "Hello World!";
text.setAttributeNS(null, 'x', 120);
text.setAttributeNS(null, 'y', 120); 
text.setAttributeNS(null, "class","text-style");
canvas.appendChild(text);

.box-test {
    width: 50px;
    height: 50px;
	x: 20px;
	y: 20px;
    fill:rgb(0,0,255);
    stroke-width:3;
    stroke:rgb(0,0,0);
}

.text-style {
    font-size: 20px;
    font-family: Courier;
}

<svg id="svgArea" width="500" height="500"></svg>

Для установки X и Y координат, затем вы можете использовать этот код

rec.setAttributeNS(null, 'x', x);
rec.setAttributeNS(null, 'y', y);

Для установки width и height

rec.setAttributeNS(null, 'height', '50');
rec.setAttributeNS(null, 'width', '50');