Is there a way to draw your objects?

Question

In javascript is there a way to draw an object that you make or givr it an id to draw it with css or how can i edit an object to make it appear on the screen?

Answer 1

Before you start

To understand this article, it is recommended to be comfortable with JavaScript, the CanvasAPI and the DOM API

It's even better if you are also familiar with SVG. 

You can't just draw HTML into a canvas. Instead, you need to use an SVG image containing the content you want to render. To draw HTML content, you'd use a <foreignObject>element containing the HTML, then draw that SVG image into your canvas.
The only really tricky thing here—and that's probably an overstatement—is creating the SVG for your image. All you need to do is create a string containing the XML for the SVG and construct a Blob with the following parts.

The MIME media type of the blob should be "image/svg+xml".The <svg> element.Inside that, the <foreignObject>element.The (well-formed) XHTML itself, nested inside the <foreignObject>.

By using an object URL as described above, we can inline our HTML instead of having to load it from an external source. You can, of course, use an external source if you prefer, as long as the origin is the same as the originating document.
<canvas id="canvas" style="border:2px solid black;" width="200" height="200"> </canvas>

JavaScript

var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' + '<foreignObject width="100%" height="100%">' + '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' + '<em>I</em> like ' + '<span style="color:white; text-shadow:0 0 2px blue;">' + 'cheese</span>' + '</div>' + '</foreignObject>' + '</svg>'; var DOMURL = window.URL || window.webkitURL || window; var img = new Image(); var svg = new Blob([data], {type: 'image/svg+xml'}); var url = DOMURL.createObjectURL(svg); img.onload = function() { ctx.drawImage(img, 0, 0); DOMURL.revokeObjectURL(url); } img.src = url;
↓↓↓ :)
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas

Answer 2

😮😮😮😮😮😮😮😮

Answer 3

🤤🤤🤤🤤🤤🤤🤤🤤

Answer 4

😨😨😨😨😨😨😨😨

Answer 5

😵😵😵😵😵😵😵😵😵😵

Answer 6

😱😱😱😱😱😱😱😱😱

Answer 7

your not a moderator

Answer 8

@Shedrick Williams
What you are currently doing is considered spam and I hereby request you to delete these messages. This section is meant for the q/a related to programming, but spamming here goes against the spirit of the community.