<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
		>
<channel>
	<title>Comments on: HTML5 Canvas Graphing an Equation</title>
	<atom:link href="http://www.html5canvastutorials.com/labs/html5-canvas-graphing-an-equation/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.html5canvastutorials.com/labs/html5-canvas-graphing-an-equation/</link>
	<description>HTML5 Canvas tutorials, articles, labs, apps, and games</description>
	<lastBuildDate>Thu, 28 Mar 2013 01:25:09 +0000</lastBuildDate>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
	<item>
		<title>By: Dylan Munyard</title>
		<link>http://www.html5canvastutorials.com/labs/html5-canvas-graphing-an-equation/#comment-23428</link>
		<dc:creator>Dylan Munyard</dc:creator>
		<pubDate>Wed, 22 Aug 2012 11:40:06 +0000</pubDate>
		<guid isPermaLink="false">http://www.html5canvastutorials.com/?p=2288#comment-23428</guid>
		<description>I haven&#039;t done any performance testing on this, but I added a drawEquationAnimated() prototype that will animate the rendering of the given equation:

Graph.prototype.drawEquationAnimated = function (equation, color, thickness) {
    var context = this.context,
        x = this.minX,
        xi = x,
        graph = this;

    var step = function () {
        xi += graph.iteration;
        if (x &lt;= graph.maxX) {
            context.save();
            context.save();
            graph.transformContext();

            context.beginPath();
            context.moveTo(x, equation.call(null, x));
            context.lineTo(xi, equation.call(null, xi));

            context.restore();
            context.lineJoin = &quot;round&quot;;
            context.lineWidth = thickness;
            context.strokeStyle = color;
            context.stroke();
            context.restore();

            // Increment x
            x = xi;

            setTimeout(step, 25);
        }
    }
    setTimeout(step, 25);
};</description>
		<content:encoded><![CDATA[<p>I haven&#8217;t done any performance testing on this, but I added a drawEquationAnimated() prototype that will animate the rendering of the given equation:</p>
<p>Graph.prototype.drawEquationAnimated = function (equation, color, thickness) {<br />
    var context = this.context,<br />
        x = this.minX,<br />
        xi = x,<br />
        graph = this;</p>
<p>    var step = function () {<br />
        xi += graph.iteration;<br />
        if (x &lt;= graph.maxX) {<br />
            context.save();<br />
            context.save();<br />
            graph.transformContext();</p>
<p>            context.beginPath();<br />
            context.moveTo(x, equation.call(null, x));<br />
            context.lineTo(xi, equation.call(null, xi));</p>
<p>            context.restore();<br />
            context.lineJoin = &quot;round&quot;;<br />
            context.lineWidth = thickness;<br />
            context.strokeStyle = color;<br />
            context.stroke();<br />
            context.restore();</p>
<p>            // Increment x<br />
            x = xi;</p>
<p>            setTimeout(step, 25);<br />
        }<br />
    }<br />
    setTimeout(step, 25);<br />
};</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Eric Rowell</title>
		<link>http://www.html5canvastutorials.com/labs/html5-canvas-graphing-an-equation/#comment-5092</link>
		<dc:creator>Eric Rowell</dc:creator>
		<pubDate>Thu, 12 Apr 2012 19:12:37 +0000</pubDate>
		<guid isPermaLink="false">http://www.html5canvastutorials.com/?p=2288#comment-5092</guid>
		<description>@adam thanks!</description>
		<content:encoded><![CDATA[<p>@adam thanks!</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: adam</title>
		<link>http://www.html5canvastutorials.com/labs/html5-canvas-graphing-an-equation/#comment-5074</link>
		<dc:creator>adam</dc:creator>
		<pubDate>Thu, 12 Apr 2012 10:12:37 +0000</pubDate>
		<guid isPermaLink="false">http://www.html5canvastutorials.com/?p=2288#comment-5074</guid>
		<description>Quite a lovely code example for an introduction to html5 canvas elements and their uses.  Thank you for the post.</description>
		<content:encoded><![CDATA[<p>Quite a lovely code example for an introduction to html5 canvas elements and their uses.  Thank you for the post.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Eric Rowell</title>
		<link>http://www.html5canvastutorials.com/labs/html5-canvas-graphing-an-equation/#comment-1151</link>
		<dc:creator>Eric Rowell</dc:creator>
		<pubDate>Mon, 15 Aug 2011 17:38:49 +0000</pubDate>
		<guid isPermaLink="false">http://www.html5canvastutorials.com/?p=2288#comment-1151</guid>
		<description>You can absolutely start a git project so long as you add a reference in the license (hopefully MIT) to me, Eric Rowell, and my site www.html5canvastutorials.com.  I&#039;m glad that you found it useful!</description>
		<content:encoded><![CDATA[<p>You can absolutely start a git project so long as you add a reference in the license (hopefully MIT) to me, Eric Rowell, and my site <a href="http://www.html5canvastutorials.com" rel="nofollow">http://www.html5canvastutorials.com</a>.  I&#8217;m glad that you found it useful!</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Barry Coughlan</title>
		<link>http://www.html5canvastutorials.com/labs/html5-canvas-graphing-an-equation/#comment-1148</link>
		<dc:creator>Barry Coughlan</dc:creator>
		<pubDate>Mon, 15 Aug 2011 10:01:11 +0000</pubDate>
		<guid isPermaLink="false">http://www.html5canvastutorials.com/?p=2288#comment-1148</guid>
		<description>Hey, I&#039;m working off this as I&#039;m trying to make some maths animation videos. If you&#039;re happy to put it under a free license I could throw my changes up on github or something?</description>
		<content:encoded><![CDATA[<p>Hey, I&#8217;m working off this as I&#8217;m trying to make some maths animation videos. If you&#8217;re happy to put it under a free license I could throw my changes up on github or something?</p>
]]></content:encoded>
	</item>
</channel>
</rss>
