Alpha's Manifesto

A black and white figure's thought-hive

Some best practices for HTML Canvas

by Colin Cieloha from Skilled.co

This is a guest post submitted by Colin Cieloha, who is an American author and content marketer at Skilled.co. He writes about everything that will draw his attention with a focus on the mobile and e-commerce space. When he is not writing he is spending his time traveling the globe and snowboarding. You can follow him on his Twitter at @ColinCieloha or on Linkedin.

His post focuses on performance tips regarding the use of HTML Canvas, and general best practices. Thanks Colin for this content!


So you’ve started using your canvas cheat sheet to acclimatize yourself to all the various uses of the canvas element. In the beginning you were working on some simple 2D drawings and objects, but now you’re looking to become proficient with the canvas element and see what it is capable of.

Finding a set of best practices for the canvas element isn’t always easy, since the element has been evolving for some time, and will continue to evolve. But there are a few great habits that have emerged which will help you achieve a higher level of efficiency with the element than you already have.

(Read more →)

Programando Arkanoid – Parte 1

Cómo hacer un pequeño juego en JavaScript y HTML5 canvas

Haciendo ya mucho tiempo que no trabajaba en JavaScript sin la utilización de ningún framework, me propuse crear algo simple que a la vez fuera divertido. Pensé en algunas opciones y la ganadora fue un juego de Arkanoid (que, ahora me entero, es una de las tantas copias del Breakout, y para mi el nombre original siempre fue Arkanoid, en fin).

El resultado final lo pueden ver aquí y el código fuente está en mi repositorio de GitHub, pero no es tanto el resultado sino el viaje lo que fue interesante, y quiero describir las cosas que aprendí en ese camino.

Vengan y acompáñenme en mi viaje.

(Read more →)

Link del día: A dibujar, HTML5 full powered

Hace tiempo que se viene hablando de las bondades de HTML5, y varios lugares ya han aprovechado sus características para ofrecer algún servicio extra, como video de forma distinta, como otro tipo de campos de navegación, como una arquitectura más semántica… pero creo que esta es la primera vez que lo veo en su uso completo.

Ayer mismo me encontré con una noticia de DeviantArt anunciando la liberación de Muro, una aplicación web totalmente HTML5 para dibujar. Quizá más de uno recuerde Harmony, uno de los primeros sitios que mostró las cosas que se podían hacer con el HTML5 Canvas, pero Muro realmente lo utiliza mucho más allá. Por si no fuera suficiente, Muro nos permite el uso de layers, brushes, y filtros o efectos para las imágenes. Por supuesto, las imágenes también pueden exportarse.

Por supuesto, ya han hecho muy buen uso de esta aplicación.

Soy un zorrinito dibujado.