Thank you for making this forum available.
I have an html document that contains a large canvas containing a few
rectangle. The javascript is inside the html body tags so that the stroke style
rectangles will be placed on top of the background (a staff of lines) and show
the staff through the rectangle borders.
I have read a book about javascript and read many web sites about dragging
objects and images, but they all have enormous complications and I do not see
what part of the code enables an object or picture to be dragged. Something
always goes wrong.
Here is what I have so far:
<!DOCTYPE html> <html>
<head>
<title>Rectangles on Staff</title> <meta name="description"
content="Mathematics From The Beginning" /> <meta name="keywords"
content="Formal definitions, undefined terms, sets, ordered sets" /> <meta
name="author" content="James Adrian"> <meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<style> a.link_style0:link {color: #000000; text-decoration: none;}
a.link_style0:visited {color: #000000; text-decoration: none;}
a.link_style0:hover {color: #00AA00; text-decoration: none;}
a.link_style0:active {color: #000000; text-decoration: none;}
a.link_style1:link {color: #000000;} a.link_style1:visited {color: #000000;}
a.link_style1:hover {color: #00AA00;} a.link_style1:active {color: #000000;}
</style>
<body style="background-image:
url([https://www.futurebeacon.com/00Music/cstaffx.png);"](https://www.futurebeacon.com/00Music/cstaffx.png\);")>
<div style="position: absolute; top: 0px; left: 0px;">
<canvas id="myCanvas" width="2300" height="1500" style="border:1px solid
#d3d3d3;">
<script type="text/javascript">
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d");
// Red rectangle ctx.beginPath(); ctx.lineWidth = "6"; ctx.strokeStyle =
"#FF0000"; // ( left, top, width, hight) ctx.rect(300, 120, 220, 20);
ctx.stroke();
// The above rectangle is located at 300px // from the left edge of the canvas
and 120px // from the top of the canvas.
// The above rectangle is 220px wide // and 20px high
// Red rectangle ctx.beginPath(); ctx.lineWidth = "2"; ctx.strokeStyle =
"#008888"; ctx.rect(560, 250, 17, 17); ctx.stroke();
// The above rectangle is 530px by 50px // and is located at 220px from the top
of the canvas // and 14px to the right within the canvas // Green rectangle
ctx.beginPath(); ctx.lineWidth = "4"; ctx.strokeStyle = "#00FF00";
ctx.rect(300, 300, 50, 50); ctx.stroke();
// Blue rectangle ctx.beginPath(); ctx.lineWidth = "10"; ctx.strokeStyle =
"#0000FF"; ctx.rect(500, 500, 150, 80); ctx.stroke();
</script>
</div>
</body> </html>
This link renders this code at futurebeacon.com:
[https://www.futurebeacon.com/00Music/rectangles.htm](https://www.futurebeacon.com/00Music/rectangles.htm)
Thank you for your help.
Jim Adrian
[https://www.futurebeacon.com/jamesadrian.htm](https://www.futurebeacon.com/jamesadrian.htm)
[email protected]
