• 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

    posted in Editorial read more
Internal error.

Oops! Looks like something went wrong!