background preloader

Canvas

Canvas
You are here: Home Dive Into HTML5 Diving In HTML 5 defines the <canvas> element as “a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.” A canvas is a rectangle in your page where you can use JavaScript to draw anything you want. So what does a canvas look like? Invisible canvas The markup looks like this: Let’s add a dotted border so we can see what we’re dealing with. Canvas with border You can have more than one <canvas> element on the same page. Let’s expand that markup to include an id attribute: Now you can easily find that <canvas> element in the DOM. var a_canvas = document.getElementById("a"); Simple Shapes Every canvas starts out blank. Click to draw on this canvas The onclick handler called this function: function draw_b() { var b_canvas = document.getElementById("b"); var b_context = b_canvas.getContext("2d"); b_context.fillRect(50, 25, 150, 100); } And then there’s this Every canvas has a drawing context Paths path .

http://diveintohtml5.info/canvas.html

Related:  CanvasHTML5

Optimize HTML5 canvas rendering with layering Introduction Often, in 2D games or when rendering HTML5 canvas, optimization is performed so multiple layers are used to build a composite scene. In low-level rendering such as OpenGL or WebGL, rendering is performed by clearing and drawing to a scene every frame. After implementation, games require optimization to cut down on the amount of rendering, at various costs. Visual Studio Magazine UI Code Expert Web Forms with HTML5 Your forms can be built entirely in HTML5, with no JavaScript necessary. Here's how. In my last column, I discussed HTML5 support for offline storage and caching through the use of LocalStorage and SessionStorage.

Canvas tutorial <canvas> is an HTML element which can be used to draw graphics using scripting (usually JavaScript). This can, for instance, be used to draw graphs, make photo composition or simple (and not so simple) animations. The images on this page show examples of <canvas> implementations which will be created in this tutorial. This tutorial describes how to use the <canvas> element to draw 2D graphics, starting with the basics. The examples provided should give you some clear ideas what you can do with canvas and will provide code snippets that may get you started in building your own content. First introduced in WebKit by Apple for the OS X Dashboard, <canvas> has since been implemented in browsers.

CSS3 + Progressive Enhancement = Smart Design Progressive enhancement is a good thing, and CSS3 is even better. Combined, they enable designers to create lighter, cleaner websites faster and easier than ever before.. CSS3 can do some pretty amazing stuff: text shadows, rgba transparency, multiple background images, embedded fonts, and tons more. Zwibbler: A simple drawing program using Javascript and Canvas - Tested under Firefox 3.5.6 and Google Chrome 3.0.195.38 This project extends the technique I created for imprecise line-drawing to create an entire vector graphics application, similar to Inkscape. It is written almost entirely in Javascript, except for a server-side program that renders text. See below if you are interested in the implementation and coding parts.

Improving HTML5 Canvas Performance Introduction HTML5 canvas, which started as an experiment from Apple, is the most widely supported standard for 2D immediate mode graphics on the web. Many developers now rely on it for a wide variety of multimedia projects, visualizations, and games. However, as the applications we build increase in complexity, developers inadvertently hit the performance wall. There’s a lot of disconnected wisdom about optimizing canvas performance. Web Dev Report - Integrate HTML5 into Existing ASP.NET Web Forms and ASP.NET MVC Applications Both public and line-of-business (LOB) applications and Web sites are using HTML5 and related technologies. HTML5 is more than just hype, and it’s more than just HTML. HTML5 and related Web development technologies governed by the W3C enable you to take advantage of some great features that make developing Web applications easier for you and consuming them friendlier for your users. Here are some examples: New HTML elements Geolocation Document object model (DOM) storage Semantic elements HTML5 forms CSS media queries ASP.NET developers who write LOB applications can easily exploit HTML5 forms because ASP.NET now ships with ASP.NET MVC 4 application templates, which make it easy to integrate HTML5 into Web Forms and previous versions of ASP.NET MVC.

LobsterPot HTML5 PivotViewer CodePlexProject Hosting for Open Source Software LobsterPot HTML5 PivotViewer Documentation is pending. Using CSS Text-Shadow to Create Cool Text Effects The CSS3 text-shadow property has been around for some time now and is commonly used to recreate Photoshop’s Drop Shadow type shading to add subtle shadows which help add depth, dimension and to lift an element from the page. This isn’t all the text-shadow property is capable of though, by getting creative and playing around with the colours, offset and blurring we can create some clever and pretty cool text effects! Check out the six text effects of vintage/retro, inset, anaglyphic, fire and board game in the demo, then copy the code snippets below to use the effects in your own designs.

SVG vs. Canvas on Trivial Drawing Application Recent popularity on Canvas development and support has made the need for SVG somewhat vague. As SVG is still not widely adopted and Canvas has recently acquired lot of support from developers and browsers, some might question the role of SVG in future web. However, this is not the case and there is a strong need for SVG. HTML5 Canvas: You don’t always have to clear the entire thing When I first started working with the HTML5 canvas element, the one thing I found a bit frustrating was the fact that you had to clear the canvas and then redraw it. Coming from Flash, I wasn’t used to this because it’s one of the many things Flash does for you. With canvas, if you’re doing something like moving a space ship around in a game and you don’t clear it before you draw the ship’s new position, eventually you’ll just end up with canvas full of ships. So, we call clearRect and clear the canvas before we draw the ship’s new position and then it looks like the ship is moving around, when it’s really just being redrawn in it’s new position. But the thing I didn’t realize at first, and I’m sure many other newbies at working with canvas don’t realize either, but you don’t have to clear the entire canvas, you can just simulate what Flash does and just redraw the area that’s changed. Why would you want to do this?

Introduction to Service Worker: How to use Service Worker Rich offline experiences, periodic background syncs, push notifications— functionality that would normally require a native application—are coming to the web. Service workers provide the technical foundation that all these features will rely on. What is a Service Worker? A service worker is a script that is run by your browser in the background, separate from a web page, opening the door to features which don't need a web page or user interaction. Today, they already include features like push notifications and in the future it will include other things like, background sync, or geofencing.

The Secret to the Page Flip in HTML5/Canvas for Windows8 and iOS source: PageFlip.js A few years back I wrote a tutorial called “The Secret Behind the Page Flip Technique” for Silverlight Developers while working as Creative Director at the experience agency, cynergy. That blog post isn’t available anymore, and I haven’t touched Silverlight in a while, but even now, I still get several requests for the solution. As I’ve been on-ramping my skills with HTML5, I decided to kill two birds with one stone and solve from scratch the advanced Page Flip Technique with Canvas. While underlying math is very similar, drawing, rotation and clipping are very different between Canvas in HTML5 and Silverlight, so I had to work out quite a few new tricks, highlighted below.

Sencha Animator - Create CSS3 Animations with Ease The Sencha Web Application Lifecycle Management platform simplifies the challenges of managing the software development lifecycle of web applications. Now you can seamlessly design, develop, and test data-intensive web applications and deliver the right user experience, on the right screen, at the right time. Sencha Platform for Web Application Lifecycle Management

Related:  Drawingframeworks jsLinks Varios