#canvas

Skia Canvas is a browser-less implementation of the HTML Canvas drawing API for Node.js. It is based on Google’s Skia graphics engine and, accordingly, produces very similar results to Chrome’s <canvas> element. The library is well suited for use on desktop machines where you can render hardware-accelerated graphics to a window and on the server where it can output a variety of image formats.

If you are rendering images in a canvas element and want to keep the pixels square and BLOCKY, you should know about the image-rendering CSS property.

HTML5 Canvas Scratch Pad

HTML5 Canvas Scratch Pad

Getting a computer to draw a shape in the way that a human would requires programming in some imperfection. The simple idea is to add in some randomization of drawing coordinates, which could be done in various ways. Below are two examples of imperfect circles drawn in an HTML5 canvas with JavaScript, where the imperfection has been added through the use of a fractal-like subdivision algorithm. The imperfection can be subtle, but it is enough to make the image appear to be human-drawn. Although the images are quite simple I find them quite nice to look at.

canvg is a SVG parser and renderer. It takes a URL to a SVG file or the text of an SVG file, parses it in JavaScript, and renders the result on a Canvas element. The rendering speed of the examples is about as fast as native SVG.

canvg is a SVG parser and renderer. It takes a URL to a SVG file or the text of an SVG file, parses it in JavaScript, and renders the result on a Canvas element. The rendering speed of the examples is about as fast as native SVG.

Here’s another experiment which makes use of a noisy data set defined by fractal subdivision, this time applied to create some interestingly textured gradients

KineticJS is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more. Try it out!

KineticJS is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more. Try it out!

Was playing Doom the other day and was reminded of this effect. I wanted to give it a shot using js and canvas of course. The original .c source can be seen here https://github.com/id-Software/DOOM/blob/master/linuxdoom-1.10/f_wipe.c

Old school demos re-built in HTML5

Old school demos re-built in HTML5

I've been trying to re-implement an HTML5 image uploader like the one on the Mozilla Hacks site, but that works with WebKit browsers. Part of the task is to extract an image file from the canvas object and append it to a FormData object for upload.

Using html2canvas how can I save a screen shot to an object? I've been exploring the demos, and see that the function to generate the screenshot is generated as follows:

Uploading - HTML5 Canvas

For an upcoming canvas project I want to give the users the ability to upload the content of the canvas to an image sharing service. When looking for a suitable API I came across imgur.com the registration was trivial, and they support CORS and base64/dataurl uploads, perfect!

My first demo is a simple Canvas element which can be used to make a collage of images.

My first demo is a simple Canvas element which can be used to make a collage of images.

Lake.js takes an img element and inserts a canvas element displaying the image and its flipped reflection directly after the img element.

Lake.js takes an img element and inserts a canvas element displaying the image and its flipped reflection directly after the img element.

"Thrust was just awesome and it is that game which I have attempted to recreate here using just JavaScript and the HTML tag. I have 'cheated' a little in that I use Scott Schiller's excellent SoundManager 2 Javascript audio manager (which in turn uses Flash) to play the sounds, but I think that is fair game in the spirit of what I am trying to do."

"jsMSX is a MSX emulator 100% written in Javascript. Yes, you read it: Javascript! It emulates the underlying Z80 CPU, TMS9918 Video Display Processor (VDP), PPI, RAM slots and Megaram. In its present form, it should be able to run any program or game developed for MSX 1.0. "

"Taking the code made by Jacob on his Mario Kart demo I thought why not give it a try using the tiles of Yahoo or Google maps to create the same effect as in the GPS systems"

"I’m really typecasting myself here. If there were an international “Person most likely to write a Spectrum emulator in Javascript” award, I’d have taken it for the last five years running. So here it is - probably the most stereotypical project I’ll ever come up with."

"With CSS you can make text wrap around an image using the float property and for most purposes this is quite adequate. However, it doesn't take into account the actual image and treats it as one big block, even if you'd prefer the text to wrap around the actual content in the picture, magazine style.Since we now have pixel access (in cool browsers, anyway) via the Canvas element, this technique can now be implemented dynamically with a bit of JavaScript."

"Data visualization in HTML has long been tricky to achieve. Past solutions have involved non-standard plugins, proprietary behavior, and static images. But this has changed with the recent growth in support for the new HTML Canvas element, which provides a native drawing API that can be addressed with simple Javascript. This article is a proof of concept for visualizing HTML table data with the canvas element."

"Using VML, in combination with behaviors, it should therefor be possible to emulate a subset of SVG or Canvas in IE."

"Canvas Graph is a small simple javascript library that allows you to conveniently plot simple line, bar and pie charts using the new HTML Canvas Tag."

"Every time it finds an image with the class reflect, it generates a new canvas element. It will do some canvas magic (scaling, cropping, gradients) and produce a reflection image. "