www.webdeveloper.com
Results 1 to 5 of 5

Thread: drawing a graph with canvas

  1. #1
    Join Date
    Jun 2014
    Posts
    4

    drawing a graph with canvas

    Finally decided to play with the canvas for the first time. My box shows up fine but the actual squares to make the graph and the line does not. Following this from online and I suspect there is something with their code. But before I scrap it and look for somekthing else, I was wondering if I could in fact fix this since I did learn something from it at least originally
    Here is the code.

    Code:
    <canvas id="graph" width="500" height="365" style="border-style:solid;">
    
    </canvas>
    
    <script>
    var g = document.getElementById("graph");
    var context = g.getContext("2d");
    for (var x=0.5; x<500; x+=10)
    {
    	context.MoveTo(x,0);
    	context.LineTo(x,365);
    }
    
    for (var x = 0.5; x < 500; x += 10) {
      context.moveTo(x, 0);
      context.lineTo(x, 375);
    }
    
    for (var y = 0.5; y < 375; y += 10) {
      context.moveTo(0, y);
      context.lineTo(500, y);
    }
    
    context.strokeStyle = "#FF0000";
    context.stroke();
    
    context.beginPath();
    context.moveTo(0, 40);
    context.lineTo(240, 40);
    context.moveTo(260, 40);
    context.lineTo(500, 40);
    context.moveTo(495, 35);
    context.lineTo(500, 40);
    context.lineTo(495, 45);
    
    context.moveTo(60, 0);
    context.lineTo(60, 153);
    context.moveTo(60, 173);
    context.lineTo(60, 375);
    context.moveTo(65, 370);
    context.lineTo(60, 375);
    context.lineTo(55, 370);
    context.strokeStyle = "#000";
    context.stroke();
    
    </script>
    Thanks
    Last edited by jedaisoul; 06-28-2014 at 09:10 AM.

  2. #2
    Join Date
    May 2014
    Posts
    672
    You need a 'beginpath' before the first moveto -- though really those three loops zig-zagging without a stroke doesn't make any sense... on the whole none of it really makes any sense; what are you trying to do with this?
    Java is to JavaScript as Ham is to Hamburger.

  3. #3
    Join Date
    Jun 2014
    Posts
    4
    Quote Originally Posted by deathshadow View Post
    You need a 'beginpath' before the first moveto -- though really those three loops zig-zagging without a stroke doesn't make any sense... on the whole none of it really makes any sense; what are you trying to do with this?
    Remember the graphs that we made in algebra when you plot pointsvand draw the line? That's ultimately what I'm trying to do. For starters though I need to learn how to do it statically like I'm trying to do here before receiving input from user. But the squares won't even show up. Only thing that shows up is the blank canvas.

  4. #4
    Join Date
    Jun 2014
    Posts
    4

  5. #5
    Join Date
    Jun 2014
    Posts
    4
    Changed code but still doesn't work. And you're right about the strokes. They make sense in the loops.

    Code:
    <script>
    var g = document.getElementById("graph");
    var context = g.getContext("2d");
    for (var x=0.5; x<500; x+=10)
    {
    	context.MoveTo(x,0);
    	context.LineTo(x,365);
            context.strokeStyle = "#000";
           context.stroke();
    }
    
    for (var x = 0.5; x < 500; x += 10) {
      context.moveTo(x, 0);
      context.lineTo(x, 375);
      context.strokeStyle = "#000";
      context.stroke();
    }
    
    for (var y = 0.5; y < 375; y += 10) {
      context.moveTo(0, y);
      context.lineTo(500, y);
      context.strokeStyle = "#000";
      context.stroke();
    }
    
    context.strokeStyle = "#FF0000";
    context.stroke();
    
    context.beginPath();
    context.moveTo(0, 40);
    context.lineTo(240, 40);
    context.moveTo(260, 40);
    context.lineTo(500, 40);
    context.moveTo(495, 35);
    context.lineTo(500, 40);
    context.lineTo(495, 45);
    
    
    context.BeginPath();
    context.moveTo(60, 0);
    context.lineTo(60, 153);
    context.moveTo(60, 173);
    context.lineTo(60, 375);
    context.moveTo(65, 370);
    context.lineTo(60, 375);
    context.lineTo(55, 370);
    
    
    </script>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles