CODEWITHSUNDEEP
javascripthtmldom
Karaja
Karaja

Reputation: 415

Drawing Shapes inside of a div

Is it possible to use the arc() and rect() functions to draw shapes inside of a div using javascript? Could you please give a simple example of a circle (drawn with 'arc()') inside of a div?

Edit: I fully understand the rect and arc function but I am getting a little bit tripped up by javascripts context.

I have created a div called appLights and have positioned it to the proper location. Now I am trying to draw just a simple circle in the top center of the div and am having trouble.

appLights = document.createElement("div");
appLights.style.position = "relative";
appLights.style.width = "30px";
appLights.style.height = "180px";
appLights.style.left = "105px";
appLights.style.top = "-175px";

var ctx = appLights.getContext('2d');
ctx.beginPath();
ctx.fillStyle = "rgb(123,123,123)";
ctx.arc(15,15,10,0, Math.PI * 2,true);
ctx.fill();

Upvotes: 1

Views: 3064

Answers (1)

Jnatalzia
Jnatalzia

Reputation: 1687

appLights MUST be a <canvas> element. You can't draw on a <div>

The first line in your code should be the following:

appLights = document.createElement("canvas");

Another issue is that you're not putting this new element anywhere on the page, so any drawing wouldn't show up until you appended it somewhere in the <body>

Upvotes: 2

Related Questions