My code stories

This post will be a short one attending a problem I briefly touched upon in my previous post on animation using canvas. We live in a "mobile first" world and need to pay attention to responsive designing. Try as you might resizing your canvas using CSS you are in for a disappointing surprise. Especially if you are rendering text, it will look all chunky and broken. My solution to this problem is to calculate a factor value based on the window and canvas width. Using this value, I can multiply it with all xes and ys and lengths and widths and so on and keep the relative positions all these shapes have to each other. var ic = window.innerWidth / (canvas.width * 1.2) > 1 ? 1 : window.innerWidth / (canvas.width * 1.2); When adding objects I apply the factor to keep the relative positions. var customShapes = []; // Figures - Balls customShapes.push({ x: ic * (canvas.width / 2 - 58), minRadius: 0, maxRadius: ic * (3), y: ic * (canvas.height / 4 - 152), borderThic...

Object animation using JavaScript is fairly simple once you get the hang of it. In the three previous posts I've explained how to render shapes and how to render a series of shapes. To recap some of the steps I've included the part where I create the objects. Creating classes I've created a generic shape class called CShape, with a set of basic properties that I find relevant for any of the shapes I'm going to render. This also includes properties relevant to animation. Each property is explained in the comments below. // Applies to circles, boxes and lines // X and Y coordinates // expand (bool) growing (true) or shrinking (false) // direction - animating going cw or ccw // speed - animation speed // borderThickness - border thickness // borderColor - border color // color - shape color // clickZone - clickable zone with pointer cursor // speed - animation speed function CShape() { this.x = 0; this.y = 0; this.expand = true; this.speed = ...

You can use HTML5 Canvas as an alternative approach designing info graphics, branding graphics etc. Using the example in my previous blog post, I will add a clickable area on the canvas and use a JavaScript event handler to execute some logic. This is the result of the previous example. I want to pop an alert Box when clicking inside the logo. I need to create an object reflecting the coordinates I want my clickable zone to have. I’m also throwing in an id/name. var CustFigure = function (x, y, height, width, name ) { this.x = x; this.y = y; this.height = height; this.width = width; this.name = name; }; In this case I just create a global Array that I can pop the objects on to.   var custFigures = []; At some point (I choose to include it in the function drawing  the logo) we create the object with the desired coordinates and push it on to the array. var custFigure = new CustFigure(50, 50, 75+50, 75+50, " Hello ...

Lately I've been playing around with HTML5 and Canvas trying to render icons and graphics without the use of image files. This blog post is simply showing how to render the HTML5 logo using only code. First up, we create a HTML5 canvas-tag where our logo will live. I’ll add some simple CSS to it for good measure, creating a circular form for our logo. We make sure to call our function rendering the logo as the page is loaded. <canvas id="xpCanvasWeb" class="testblock" width="175" height="175"></canvas> <style type="text/css"> .testblock { background: none repeat scroll 0 0 #2a2a2e; border: 1px solid #2a2a2e; border-radius: 115px; margin: 10px; } </style> Now, for the rendering-function, please see my inline code. My approach towards this is to paint the logo in «layers», starting with the background and adding on layer by layer until the logo is complete. By using semi-transpare...