omz:forum

    • Register
    • Login
    • Search
    • Recent
    • Popular
    1. Home
    2. jamesadrian

    Welcome!

    This is the community forum for my apps Pythonista and Editorial.

    For individual support questions, you can also send an email. If you have a very short question or just want to say hello — I'm @olemoritz on Twitter.


    • Profile
    • Following 0
    • Followers 0
    • Topics 0
    • Posts 1
    • Best 0
    • Controversial 0
    • Groups 0

    jamesadrian

    @jamesadrian

    0
    Reputation
    448
    Profile views
    1
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    jamesadrian Unfollow Follow

    Latest posts made by jamesadrian

    • RE: HTML5 Canvas

      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
      jamesadrian
      jamesadrian