javascript - Creating Circles(div) and appending it to div#canvas -
i trying create new circles pen hovers on window. having issues cannot add circles page. hovers around. how able modify code add circles hovers.
<!doctype html> <html> <head> <title> javascript environment: project </title> <meta charset="utf-8"> <style> html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; } #canvas { background-color: yellow; width: 100%; height: 100%; } .pen { position: absolute; background-color: lightblue; width: 10px; height: 10px; border-radius: 5px; } </style> <script> window.onload = function() { function circle(x, y) { this.x = x; this.y = y; } var canvas = document.getelementbyid("canvas"); canvas.onmousedown = function() { mousedown(); }; canvas.onmouseup = function() { mouseup() }; canvas.onmousemove = function() { mousemove(event) }; function mousedown (){ console.log ("mouse down"); } function mouseup (){ console.log ("mouse up"); } function mousemove(e) { var canvas = document.getelementbyid("canvas"); var pen = document.createelement("div"); var x = e.clientx; var y = e.clienty; var coor = "coordinates: (" + x + "," + y + ")"; pen.setattribute("class", "pen"); pen.style.left = x + "px"; pen.style.top = y + "px"; document.getelementbyid("canvas").innerhtml = coor; canvas.appendchild(pen); addcircles(x, y); console.log("location @ " + x + " : " + y); } function addcircles(x, y) { var canvas = document.getelementbyid("canvas"); var circle = document.createelement("div"); circle.setattribute("class", "pen"); circle.style.left = x + "px"; circle.style.top = y + "px"; canvas.appendchild(circle); } canvas.addeventlistener("mousemove", mousemove, false); }; </script> </head> <body> <div id="canvas"></div> </body> </html>
the problem in line document.getelementbyid("canvas").innerhtml = coor;
try adding span <span id="canvastext"></span> inside of canvas div , changing above line document.getelementbyid("canvastext").innerhtml = coor;.
as stands, "reset" contents of canvas every time mouse moves, circles instantly removed it. reset span inside canvas keep circles around.
Comments
Post a Comment