Tag Archives: JavaScript

Best Practices for Speeding Up Your Web Site – Yahoo Developer Network

I spent some time spelunking through my bookmarks for this article. Overall, this article has some really good practices to follow in general on coding a website.

Best Practices for Speeding Up Your Web Site

ECMAScript 6 Resources For The Curious JavaScripter

Addy Osmani has put together these resources for EcmaScripting.

http://addyosmani.com/blog/ecmascript-6-resources-for-the-curious-javascripter/

Scaling HTML Canvas

I did some Googling on how to scale a HTML canvas and found these two SO questions.
Continue reading

Reworked Sierpinski Triangle JavaScript

I’m just about done reworking the recursive function to plot the mid points of a triangle and create nested triangles within it. I still have to tweak it a bit because I want the middle triangle to be the color of the canvas. Not entirely sure how to do that yet but I’ll update this post when I figure it out.

Also this was a pretty good read:
http://sixrevisions.com/html/canvas-element/
Continue reading

Drawing Lines Onto HTML5 Canvas

There are a few things I want to quickly fix on my Sierpinski triangle JavaScript. I reworked how I drew the triangle onto the canvas this morning and I like how it turned out. Next I’m going to attempt to dynamically plot an equilateral triangle onto the canvas.

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
						
/* 
    draw()
     - Draws a triangle from three given points.
     - Is able to a set fill color.
     - Is able to a set line color.
     - Is able to a set line width. 
*/
function draw( pointA, pointB, pointC, fillStyle, strokeStyle, lineWidth ){

	// Setting start point
	context.moveTo( pointA.x, pointA.y );

	// Connecting the points
	context.lineTo( pointB.x, pointB.y );
	context.lineTo( pointC.x, pointC.y );
	context.lineTo( pointA.x, pointA.y );
							
	// Line style variables may be false 
	if( fillStyle != false ){
		context.fillStyle = fillStyle;
		context.fill();
	}

	if( strokeStyle != false )
		context.strokeStyle = strokeStyle;

	if( lineWidth != false )
		context.lineWidth = lineWidth;

	// Draws the line
	context.stroke();
}

draw( {x: 20, y: 20}, {x:20, y:60}, {x:60, y:20}, false, false, false );

HTML DOM Events

I spent around 10 minutes adding some extra mouse events to my particle simulation JavaScript this morning.

Continue reading

HTML Mouse Tracking

I’ve was Googling on how work with mouse events and found these gems.

Continue reading