NotesSkia 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.Unfurl
NotesIf 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.Unfurl
NotesGetting 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.Unfurl
Notescanvg 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. Unfurl
NotesHere’s another experiment which makes use of a noisy data set defined by fractal subdivision, this time applied to create some interestingly textured gradientsUnfurl
NotesKineticJS 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!Unfurl
NotesWas 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.cUnfurl
NotesI'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.FeedUnfurl
NotesUsing 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:FeedUnfurl
NotesFor 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!FeedUnfurl
Notes"Thrust was just awesome and it is that game which I have attempted to recreate here using just JavaScript and the HTML <canvas> 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."Unfurl
Notes"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. "Unfurl
Notes"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"Unfurl
Notes"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."Unfurl
Notes"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."Unfurl
Notes"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."Unfurl
Notes"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."Unfurl
Notes"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. "Unfurl
About | Skia Canvas
Sharp canvases | soledad penadés
WE ARE BACK
javascript - Convert Data URI to File then append to FormData - Stack Overflow
Uploading directly from HTML5 canvas to imgur — Jonas Wagner's Blog
Sketchpad - Online Paint/Drawing application
Jon Combe | Experiments | Thrust: A classic computer game remake using <canvas>