First of all, we should create a clipping path. Canvas path is a series of points connected by lines or curves dependent on the drawing instructions. We start the path using the method beginPath and set its first point using the method moveTo. Then we construct multiple subpaths using the lineTo, arcTo, quadraticCurveTo and bezierCurveTo methods, while the ending point of each new subpath becomes the new context point. Finally we use the closePath method to return to the starting point and so make out path closed. Rather than drawing the path point by point, we can also use the whole shape drawing methods rect and arc. When the path is ready, we can fill it, stroke it, or use it as a clipping region.

The clipping in HTML5 canvas is simple and straightforward. Since we use the clip method, all future drawing will be limited to the clipping region. So, if we draw the image after the clip method then only the part of the image inside the path will be actually drawn and the rest of the canvas area will stay unchanged.

Let’s draw the below picture (I took it in the Schonbrunn Gardens, Vienna; just an amazing place!) into the canvas that we’ll clip with a smaller rectangle at the center.

Read more

There can be no doubts that the canvas technology was one of the most notable achievements of HTML5. Even though canvas still seems to be very limited and slow in comparison with the native OS graphics, it’s hard to overrate the conceptual importance on this invention. Together with AJAX, CSS3 and other newest techniques, canvas turns a modern browser to the real full-featured dynamic application platform with no prostheses and crutches through various add-ons and plug-ins.

It goes without saying that canvas couldn’t go without a possibility of image processing. While in the old classic WEB an image was considered a static thing, canvas lets us access the image row data and manipulate it on the level of pixels, so we can make changes in an image on the fly. Doing it on the client side we free the server from unnecessary load, save storage space and significantly reduce the amount of downloaded resources. Moreover, canvas can venture the dynamic image effects which we could haven’t even imagined if every change would require a client-server connection trip.

In this part of the article we’ll understand the basics of the image processing with canvas, implement some simple manipulations and see how it can be used in the practical WEB design. In the upcoming parts I’ll cover the more complicated cases.

Read more

Vertical centering of elements in HTML

The vertical alignment, in particular centering, of HTML elements is a classic example of something that seems simple but in practice is very complicated. A lot of web developers straggle with it, and not only young developers. For example, I found six frequent (i.e. very popular) questions in Stack Overflow community dealing with this problem.

A lot of forum posts, Q&A threads and blog articles were published about vertical alignment and centering; there even exists a site (quite pure, though) specially dedicated to this. So, why have I decided to contribute? Mainly, it’s because the information becomes outdated very quickly in our crazy world, especially in the super crazy world of computer programming. Even the really good sources that where undoubtedly relevant two or three years ago are almost obsolete nowadays and thus something more fresh is required.

This article explains the various methods of HTML elements centering including the most contemporary of them, examines their advantages and disadvantages and shows how to use these methods in the most common situations.

Read more

JavaScript substring, substr and slice

The manipulations with texts are traditionally tedious, but essential tasks in the life of every program developer. Even it never was and most probably will never be a big pleasure we usually have no option to avoid it. The programming systems and tools provide rich sets of functions for the common operation with strings. However, the variety of methods often is confusing, in particular taking in account the fact that exactly the same method name may not mean exactly the same functionality in the different languages. Honestly speaking, even after more than ten years of intensive programming in JavaScript sometimes I’m still tangled in the details of substring, substr and slice methods and not always can recall how the different values of their parameters can affect the results.

In this article I tried to take this specific issue and put it in order. First of all, I placed the full description of all three methods together, in one place. Then I examine their similarities and differences as well as the choice considerations. Finally, I placed here a simple live form in which you can play with the functions and parameters and immediately see the results.

Read more

Complete JSON online tools guide

The JSON (acronym of JavaScript Object Notation) is an open standard format for storing and transmitting data objects in the form of human-readable text. The JSON idea is based on simple and universal ‘name-value pairs’ concept, but JSON also provides the full supports of hierarchical structures and so is suitable for almost any type of data with any level of complicity.

Being first officially released in 2002, JSON quickly became very popular among the Web developers and today it is a de-facto standard for AJAX. The key advantages of JSON are its simplicity and lightweight. Originally JSON was derived from JavaScript and therefore it’s very easy to integrate JSON with the c-based languages like JavaScript, Java, PHP, C++, C#, etc. However, as a result of its high popularity, it was developed a lot of JSON tools and libraries and today JSON is natively supported by almost any recent language and browser.

Read more