Design, CG Graphics & Inspiration

Pixel Distortions with Bilinear Filtration in HTML5 Canvas

Pixel Distortions with Bilinear Filtration in HTML5 Canvas

In this post I want to describe simple methodology of pixel image distortion on “clean” javascript in 2D – Canvas without the use of the special libraries and shaders, by the direct access to the pixels of the image. I hope, it will be interesting and useful both for general development and for the decision of some tasks.

Read more…

  • February 22, 2012,
  • Stdit

Client-side evroneCrop on Canvas

Client-side evroneCrop on Canvas

In one of my projects it was necessary to do a crop for profile pictures that were loaded by users. Standard decisions, such as Jcrop, after a selection of the area send coordinates to the server, and crop images must be carried out already on a server. Meantime, modern browsers already reached the state, when similar actions can be carried out at once on a client. It urged me to write the crop with the use of canvas, which would produce all actions on a client and sent the prepared image as base64 string on a server. Besides the acceleration of work and unloading of server, it similarly will allow us to change user’s profile image on a page at once, without the need to load it from a server.

Read more…

  • November 29, 2011,
  • Arseny Zarechnev

LibCanvas Basics. The Practice

LibCanvas Basics. The Practice

This is a continuation of the article about LibCanvas basics. In the first part we’ve touched upon the theoretical side and now we’re going to do some practice and try to implement very basic and simple things. The main purpose of the article is to master the basic knowledge about LibCanvas, we’ll write a simple scripts, unsuitable for the use in real life, but you can develop them into something great.

Read more…

LibCanvas Basics. The Theory

LibCanvas Basics. The Theory

One of the most frequently asked question about LibCanvas now is “How to get started?” I agree that the threshold of entering into this library is slightly higher than in the simple canvas-library, so in this topic I will cover the basic notions of LibCanvas, such general concepts and principles as drawing primitive shapes, mouse and keyboard events, animation, enhanced context and behavior.

Read more…

HTML5 Canvas: Frequently Asked Questions

HTML5 Canvas: Frequently Asked Questions

In this post I would like to share some information about HTML5 Canvas in F.A.Q. format.

Read more…

  • August 11, 2011,
  • TheShock

20 Free HTML5 Games

20 Free HTML5 Games

A lot of great changes happen in the world of web development and web technologies. As time goes really fast we get more and more innovations in these fields. Previously, everyone was excited with Flash that initially was used to add animation, video, and interactivity to web pages. And now it is often used for advertisements, games and flash animations for broadcast. But today is a new page in history of HTML5. And in this topic we would like to present to your attention a cool collection of 20 free HTML5 games. Unlike Flash, HTML5 is open source and it is totally free. As with any new technology, there are some problems with HTML5, but these are expected to be overcome in some time. The thing with HTML5 at present time is that the older browsers, for example Internet Explorer, do not support it. So if you would like to try the games we have listed below, you will have to make sure that you have any of these browsers installed: Chrome, Safari or Firefox.

Read more…

  • July 25, 2011,
  • AndrewG

Creating a Framework For Canvas: Objects and Mouse

Creating a Framework For Canvas: Objects and Mouse

How often do you encounter a question: how can I get whether the mouse is over the element or not, as it is implemented in the framework? In this post, we will help you to answer it and implement such a framework based on Canvas AtomJS.

Read more…