omz:forum

jamesadrian

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

jamesadrian

@jamesadrian

Latest posts made by jamesadrian