Node.js may not be the “new” hotness, but it’s still pretty hot, and getting hotter all the time. Whether you’re a .NET developer who’s still on the fence about JavaScript, or just haven’t gotten around to taking a look at Node, now is a pretty good time to do so, and in this post, I’ll show you a nice combination of tools that make learning Node easy and fun, namely nodeschool.io and the new Visual Studio Code editor.
What is Node.js?
On the off chance that you’ve found your way here, but don’t know what Node.js is, Node.js (sometimes referred to simply as Node) is an execution environment for JavaScript code, based on the V8 JavaScript runtime from Chrome. It’s designed to be fast, lightweight, and efficient. You can use node to write server applications in JavaScript, from real-time chat apps, to web APIs, to full web applications. While Node itself is pretty simple, with a [limited, but want another word] API set, it ships with NPM, the node package manager, which provides a fast and easy way to install packages, which are collections of functionality wrapped up in such a way as to make them easy to add to your Node projects. Node packages are available to facilitate all kinds of applications, including MVC-style routing engines, template engines, unit testing and more.
[This is part 7 of an ongoing series of posts examining the HTML5 Canvas element. In Part 1 of this series, I introduced Canvas and prepared a template to make further explorations a bit simpler, and also introduced JsFiddle, a neat tool for experimenting with and sharing web code. In Part 2, I demonstrated the ability of Canvas to allow your page background to shine through, and showed you how to render simple shapes on the drawing surface. In Part 3, I showed how to draw paths and text in Canvas. In Part 4, I showed how to transform the drawing context and scale, rotate, and skew your drawings. In Part 5, I introduced basic animation concepts, including the animation loop. In Part 6, I demonstrated some techniques for managing multiple animated shapes in your Canvas implementations.]
Performance Matters
As you start working with HTML5 Canvas, one of the things that you may discover is that the more things you’re drawing, the more likely it is that you will run into performance issues, particularly if your code is not optimized. This is also true the larger your canvas gets, which may especially impact full-screen games or similar implementations.
[This is part 6 of an ongoing series of posts examining the HTML5 Canvas element. In Part 1 of this series, I introduced Canvas and prepared a template to make further explorations a bit simpler, and also introduced JsFiddle, a neat tool for experimenting with and sharing web code. In Part 2, I demonstrated the ability of Canvas to allow your page background to shine through, and showed you how to render simple shapes on the drawing surface. In Part 3, I showed how to draw paths and text in Canvas. In Part 4, I showed how to transform the drawing context and scale, rotate, and skew your drawings. In Part 5, I introduced basic animation concepts, including the animation loop.]
The Part Where Things Get Messy
Now that you know how to get a shape moving across the screen, you’re probably wondering what’s next. Well, the truth is that the animation code we looked at in the previous installment of this series was fairly primitive, and if we tried to scale it to an animation or game with many shapes, we’d be writing a LOT of repetitive code, and we’d soon end up with a very messy batch of spaghetti.
[This is part 5 of an ongoing series of posts examining the HTML5 Canvas element. In Part 1 of this series, I introduced Canvas and prepared a template to make further explorations a bit simpler, and also introduced JsFiddle, a neat tool for experimenting with and sharing web code. In Part 2, I demonstrated the ability of Canvas to allow your page background to shine through, and showed you how to render simple shapes on the drawing surface. In Part 3, I showed how to draw paths and text in Canvas. In Part 4, I showed how to transform the drawing context and scale, rotate, and skew your drawings.]
Get Moving
Simply defined, animation is a technique that provides the illusion of movement by changing the position, size, shape, or other properties of a drawn object over time. In traditional animation, artists draw a scene one frame (or cel) at a time, by hand, changing each scene just slightly with each new frame. Thankfully, we don’t have to go through such a laborious process to create animations with HTML5 Canvas.
So far in this series, we have only drawn shapes on our canvas once. In order to start using animation, we need a way to draw multiple frames, and at a rate that provides the necessary illusion of smooth movement. But first, let’s draw a single frame of content, and we’ll keep it nice and simple…we’ll use the same reference grid as in previous examples, and we’ll add a small white box to our canvas, using the following code (if you’re new to the series, see Part 1 for the page template we’re plugging this code into, or the jsFiddle below for the complete finished example):
1: $(document).ready(function() {
2: var canvas = $("#myCanvas").get(0);
3: var context = canvas.getContext("2d");
4: var posX = 0;
5: var posY = 75;
6:
7: function renderGrid(gridPixelSize, color)
8: {
9: // grid code omitted for brevity
10: }
11:
12: function renderContent()
13: {
14: context.save();
15: renderGrid(20, "red")
16: context.beginPath();
17: context.fillStyle = "White";
18: context.strokeStyle = "White";
19: context.fillRect(posX, posY, 10, 10);
20: context.restore();
21: }
22:
23: renderContent();
24: });
In the code above, we’re using jQuery‘s ready event to draw our reference grid and a small white rectangle on the canvas. I’ve also added a couple of variables (in bold) to hold the current position of the rectangle. Here’s what our example looks like so far:
OK, so it’s a bit plain perhaps, but we can make it better with animation. To get started, as noted earlier, we need a way to draw multiple frames at a specific rate, and for that purpose, most folks use what’s called an animation or game loop, which looks something like this:
1: function animationLoop()
2: {
3: canvas.width = canvas.width;
4: renderContent();
5: posX += 5;
6: if (posX > 500)
7: posX = 0;
8: setTimeout(animationLoop, 33);
9: }
In the code above, I’ve created a function that will take care of drawing a frame of our animation each time its called. Recall from earlier parts of the series that setting canvas.width will reset the canvas. The rest of the code simply draws our content, then adds 5 to the posX variable which determines where our box is drawn, and if posX is larger than 500, resets it to 0. The last line is key…we use JavaScript’s setTimeout function to automatically call animationLoop every 33 milliseconds, which gives us a frame rate of approximately 30 frames per second (to get FPS, just take 1000ms and divide by the target frame rate – 1000 / 30 = 33.3333333333333). Here’s what it looks like:
Note: If you can’t play the video, you can also see the code in action by clicking the Result button below…
Here’s a jsFiddle for the above example:
As you can see, it’s pretty easy to get things moving in JavaScript and Canvas. Of course, moving a little white box is just the start. Let’s go back to our pal from the previous entry in this series, and have a little more fun. We’ll add a few fields to keep track of some additional properties of the object we’re drawing (note that for more complex cases, it probably makes sense to look at creating objects to encapsulate all of the relevant properties for a given shape that you’re drawing), as well as a new function to aid in drawing our shape (new/modified code is in bold):
If everything’s working as expected, here’s what it should look like:
Note: If you can’t play the video, you can also see the code in action by clicking the Result button below…
Here’s a JsFiddle with the final code from this post, if you want to play with the APIs:
Summary
Animation in HTML5 Canvas is pretty easy and straightforward to accomplish. Of course, there’s much more you can do, including abstracting some of the animation tasks so you’re not doing quite so much low-level drawing, or even taking advantage of 3rd party libraries to simplify your life.
[This is part 4 of an ongoing series of posts examining the HTML5 Canvas element. In Part 1 of this series, I introduced Canvas and prepared a template to make further explorations a bit simpler, and also introduced JsFiddle, a neat tool for experimenting with and sharing web code. In Part 2, I demonstrated the ability of Canvas to allow your page background to shine through, and showed you how to render simple shapes on the drawing surface. In Part 3, I showed how to draw paths and text in Canvas.]
Transformations in HTML5 Canvas are surprisingly straightforward, but come with a twist if you’re used to other platforms. For example, in both SVG and Silverlight, transforms are applied by applying additional markup elements or attributes to specific elements or groups of elements. This means that you have pretty fine-grained control of transformations, and can apply them even after a given element has been rendered, by using code to add the necessary attributes.
[This is part 3 of an ongoing series of posts examining the HTML5 Canvas element. In Part 1 of this series, I introduced Canvas and prepared a template to make further explorations a bit simpler, and also introduced JsFiddle, a neat tool for experimenting with and sharing web code. In Part 2, I demonstrated the ability of Canvas to allow your page background to shine through, and showed you how to render simple shapes on the drawing surface.]
For part 3 of our exploration of HTML5 Canvas, I’m going to introduce you to a couple of additional ways to draw…the path APIs and the text APIs. Actually, if you’ve read part 2, you already met one of the important path APIs, namely context.arc, which provides the ability to draw circles (or portions of circles). But circles aren’t the only thing we can draw with paths…not by a long shot…
[This is part 2 of an ongoing series of posts examining the HTML5 Canvas element. In Part 1 of this series, I introduced Canvas and prepared a template to make further explorations a bit simpler, and also introduced JsFiddle, a neat tool for experimenting with and sharing web code.]
The HTML5 Canvas element holds much promise in terms of making it easier for web developers and designers to create rich animated elements for their sites, without the need for additional browser plug-ins. In this post, we’ll look at the basics of drawing shapes in Canvas, and a little bit about CSS and Canvas.
In this post, I’m going to begin an examination of one of the hottest new features of HTML5, namely the Canvas element.
What is Canvas, anyway?
The best place to start is at the beginning, and that’s with an explanation of what Canvas actually is. Canvas is a new element that is part of the HTML5 specification, and can be added to your markup as simply as this:
[This is the second in a 3-part series. Part 1, “Make Script Performance Automatic with Custom Templates in Visual Studio 2010”, can be found here.]
In part 1 of this series, I showed you how you can improve the script performance of your websites by using Visual Studio’s built-in support for exporting templates to create a new MVC3 web site template that relocates <script> references and blocks to the end of the page, where they will not interfere with the loading of the main visual elements of your site.
In this second part, I will show you how you can customize the T4 templates used to create new items in an MVC3 project, so that when you add new views to your project, they also have the scripts located at the end of the page. That way both the Master page / Layout for your original project AND any views you add have the scripts in the best location for performance. As a reminder, if your scripts dynamically add content to the DOM, you may want to leave those scripts in the <head> section of the page, since locating them at the bottom of the page may impact the page visibly during rendering. Continue reading Tweaking Add Item Templates for Better Script Performance
If you’ve ever used a tool like Yahoo!’s Yslow to analyze the performance of your web application, you’ve probably run into the recommendation that you should put your scripts at the bottom of the page, unless those scripts insert page content (a good example of this, which we’ll see later in this post, is modernizr.js, which dynamically adds support for semantic HTML5 elements to older browsers that do not natively support them).
Unfortunately, if you use the default MVC 3 templates in Visual Studio 2010, things like the script reference for jQuery are added in at the top of the page, in the <head> section of the document. This works fine, but may potentially delay the loading of the page while the external script is downloaded and loaded. You could, of course, manually move the script references each time you create a new project, but this would result in unnecessary duplication of effort. Continue reading Make Script Performance Automatic with Custom Templates in Visual Studio 2010
![ECBasicAnimation1_thumb[4]_2](http://dhcontent.blob.core.windows.net/images/2015/06/ECBasicAnimation1_thumb4_2.png "ECBasicAnimation1_thumb[4]_2")