Servage Magazine

Transformations on the canvas refer to the mathematical adjustment of physical properties of drawn shapes. The two most commonly used shape transformations are scale and rotate, which we will focus on in this section. Under the hood, a mathematical matrix operation applies to all transformations. Luckily, you do not need to understand this to use simple Canvas transformations. We will discuss how to apply rotation, translation, and scale transformations by changing simple Canvas properties. Rotation and Translation Transformations An object on the canvas is said to be at the 0 angle rotation when it is facing to the left. (This is important if an object ...

Today I focus on web redesigning, as the rapidly changing technologies leads many established website owners to consider a redesign, for many reasons. Generally, when a client approaches us for redesigning their site, we mainly concentrate on their needs and expectations for a new design, while taking note of the current problems they face with the old design. Another thing we look for is current design trends and their competitors’ websites. Unfortunately, we rarely try to determine actual performance issues of the current website by looking at various analytical tools and user research. If we were to review the old data, via tools like Google Analytics, we would gain insight of ...

The Jenware site (the sample website I have depicted about in the earlier articles) qualifies as a responsive design, but it is clearly simplified and represents some best-case scenarios. Getting responsive right takes some planning and work. Because the mobile Web is relatively new, the development community is still encountering and working through the challenges of mobile design. I’d like to bring you up to speed on some of the trickier aspects and limitations of RWD and mobile design in general. The website ResizeMyBrowser.com does exactly what its name says. Click one of the dimensions listed on the screen (320x480, for example) and the site resizes ...

Compositing on the Canvas Compositing refers to how finely we can control the transparency and layering effects of objects as we draw them to the canvas. There are two attributes we can use to control Canvas compositing operations: globalAlpha and globalCompositeOperation. globalAlpha The globalAlpha Canvas property defaults to 1.0 (completely opaque) and can be set from 0.0 (completely transparent) through 1.0. This Canvas property must be set before a shape is drawn to the canvas. globalCompositeOperation The globalCompositeOperation value controls how shapes are drawn into the current Canvas bitmap after both globalAlpha and any transformations have been applied. In the following list, ...

Based on a recent survey, I have included some useful hints, in this post, for an e-commerce website. There are many ways to improve conversion rate, but not all are viable, so I have noted those that are good practical suggestions. In e-commerce businesses, we have seen low value products (below $100) sell rapidly. Yet, visitors show a different behavior when they approach high value product pages. In our survey, we found that the users journey is quite normal on the low value products, up to the checkout pages. But suddenly, our users abandon the cart, either keeping items in wish list or leaving without any indication. When we dug the ...

Presently, responsive web design still struggles to find great solutions for managing images and related reflow problems. Some web designers have made decent attempts to escape reflow problems as we will see in this post. To deal effectively with responsive web design, we need to first concentrate on the images because they consume a greater amount of memory; hence, slower downloading. There are plenty of ways, however, to reduce image weight, but none are effective enough to keep a balance between size and resolution. The reason is simple, when you lower image weight in KBs, your images will show pixilation or render in odd ways on bigger screens. Possible Remedies One issue we ...

Optimized JPEGs have slightly smaller file sizes and better color fidelity (although I’ve never been able to see the difference) than standard JPEGs. For this reason, you should select the Optimized option if your image software offers it. Look for the Optimized option in Photoshop and third-party JPEG compression utilities. Fireworks does not offer the option as of this writing. Remember to save JPEGs that are targeted for iPad Retina displays in Progressive format to circumvent a Safari function that automatically downgrades JPEGs over 2 megapixels (more than 2.1 million pixels in the image). Blurring or smoothing the image Because soft images compress smaller than sharp ...

Let’s take a deeper look at some of the other methods we can use to draw paths on the canvas, including arcs and curves that can be combined to create complex images. Arcs There are four functions we can use to draw arcs and curves onto the canvas. An arc can be a complete circle or any part of a circle. context.arc() Here is context.arc() in action: context.arc(x, y, radius, startAngle, endAngle, anticlockwise) The x and y values define the center of our circle, and the radius will be the radius of the circle upon which our arc will be drawn. startAngle and endAngle are in ...