/    Sign up×
Community /Pin to ProfileBookmark

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>

[/code]

Thanks

to post a comment
HTML

4 Comments(s)

Copy linkTweet thisAlerts:
@deathshadowJun 27.2014 — 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?
Copy linkTweet thisAlerts:
@erinkennedyauthorJun 27.2014 — 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?[/QUOTE]

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.
Copy linkTweet thisAlerts:
@erinkennedyauthorJun 27.2014 — Changed code but still doesn't work. And you're right about the strokes. They make sense in the loops.

<i>
</i>&lt;script&gt;
var g = document.getElementById("graph");
var context = g.getContext("2d");
for (var x=0.5; x&lt;500; x+=10)
{
context.MoveTo(x,0);
context.LineTo(x,365);
context.strokeStyle = "#000";
context.stroke();
}

for (var x = 0.5; x &lt; 500; x += 10) {
context.moveTo(x, 0);
context.lineTo(x, 375);
context.strokeStyle = "#000";
context.stroke();
}

for (var y = 0.5; y &lt; 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);


&lt;/script&gt;
×

Success!

Help @erinkennedy spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...