I don't see a way of posting a new thread, so I will reply to this very general subject title.
I would like to know how to enhance this code so that I can drag the rectangles that are in the canvas. Please notice that the background picture is a staff of lines and that the javascript in written within the html /html tags to make make the canvas get drawn on top of the background picture.
<!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);">
<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>
Thank you for your help.
Jim Adrian
jim@futurebeacon.com
