Adjusting Image Brightness and Color Using the HTML5 Canvas API
Posted by John Robinson
on October 6, 2013
5 comments
Ever needed to adjust the brightness of an image? Or maybe you’d like to make an image feel warmer by increasing it’s red channel?
As a followup to my earlier articles, “How You Can Do Cool Image Effects Using HTML5 Canvas” and “How You Can Build an HTML5 Photobooth App“. In these earlier articles, I provided code for a number of separable color filters: grayscale, sepia, red, brighter, darker. All of these filters are classified as color filters where the output value for each pixel relies solely on the input state of the same pixel. It turns out that all of these color filters can all be modeled by a single data driven filter called a Color Matrix Filter which I’ll cover in this article. This filter takes as input a “color matrix” that contains weights (or coefficients) that determine how the output for a given color component relates to the other color components on input.
Essential Canvas For HTML5 Now Available in Alpha
Posted by John Robinson
on September 29, 2013
Comments Off on Essential Canvas For HTML5 Now Available in Alpha
You’d Love to Draw and Animate using the HTML5 Canvas API. Maybe you want to be able to write an HTML5 game? Or maybe you want to add image editing to your latest web app? Or maybe you’ve just heard a lot about the HTML5 Canvas API and want to learn about it?
Use Node.js to Extract Data from the Web for Fun and Profit
Posted by John Robinson
on August 25, 2013
18 comments
Need to automate pulling some data from a web page? Or want to mash up some unstructured data from a blog post with another data source. No API for getting at the data… !@#$@#$… No Problem… Web scraping to the rescue. What is web scraping?… you may be asking… Web scraping consists of programmatically (typically with no browser involved) retrieving the contents of web pages and extracting data from them.
In this article, I’m going to show you a pretty powerful set of tools for scraping web content quickly and easily using Javascript and Node.js.
How You Can Draw Regular Polygons with the HTML5 Canvas API
Posted by John Robinson
on July 24, 2013
2 comments
So maybe you need to draw a pentagon? or a hexagon? How about just a simple equilateral triangle? Any of those seemingly basic primitive regular polygons that you learned about back in geometry class. The Canvas API is extremely powerful and enables you to draw just about anything with Javascript. But that doesn’t mean that the Canvas provides a simple API for every shape that you might want to draw. In fact, the Canvas API provides almost no simple shape drawing outside of rectangles. Rather the Canvas API provides a set of very powerful and flexible basic drawing functions based on the path abstraction that can be used to draw just about anything. But in order to wield the Canvas properly, you have to have a good understanding of the APIs and sometimes a tad bit of trigonometry.
In this article, I’m going to show you how to not only draw an arbitrary regular polygon, but we’ll also be delving deeper to understand the algorithm and the math behind the code and hopefully in the process providing a better understanding of how to use the HTML5 Canvas API.
goo.js – The HTML5 Canvas API Simplified
Posted by John Robinson
on June 23, 2013
Comments Off on goo.js – The HTML5 Canvas API Simplified
Check out my new Javascript library, goo.js. Goo.js is a microlibrary intended to make it easy to draw and handle mouse and keyboard events with the HTML5 canvas library. Help out by contributing on GitHub.
- Easy fullscreen canvas apps with auto resizing
- Mouse event support
- Mouse coordinates normalized to canvas coordinates
- Key event support
- Animation timer
Demos after the link…
Visit the goo.js project page for more samples, information and source…
Introduction to HTML5 Canvas
Posted by John Robinson
on May 20, 2013
Comments Off on Introduction to HTML5 Canvas
Maybe you’ve heard of the HTML 5 Canvas API, but don’t know what it’s good for…? Maybe you’ve heard that it’s the way to go if you want to code an HTML5 game? Or maybe you’ve heard that it gives you explicit control over drawing in your browser? So what does all that mean?… Just what is the HTML5 Canvas API?
Let me pull back the curtain a little for you and give you some insight into what the HTML5 Canvas API is all about and what it can do for you and your web apps.
In this article, I’m going to give an introductory overview of the HTML5 Canvas API. The sample application that comes with this article, “Canvas Playground”, gives a number of canvas drawing examples and even lets you interactively play around with the Canvas API. Give it a try.
Complex Animations Using HTML5 Canvas
Posted by John Robinson
on May 13, 2013
Comments Off on Complex Animations Using HTML5 Canvas
In my upcoming ebook, “Essential Canvas for HTML5“, you’ll not only learn the basics of animation but you’ll also learn how to do complex Flash-like animations using HTML5 and Javascript that impart dynamics through tweening and other advanced techniques. I’ll break it all down for you and walk you through the source code. Here is just one of the samples that come with the book.
How You Can Build an HTML5 Photobooth App
Posted by John Robinson
on May 7, 2013
Comments Off on How You Can Build an HTML5 Photobooth App
You want the users of your web app to be able to use their webcam to take their own profile shots and you’d like them to be able to personalize or stylize the picture before uploading it your weberver. Or maybe you’ve seen one of those fun photobooth-type apps that takes photos, applies cool image effects to them and lets you share them… wondering how they worked.
Imagine if your HTML5 app could programmatically access your webcam, take snapshots and modify the image data procedurally. You could then let your user’s upload or share their self portraits.
In this article, I’m going to teach you how to do that and more. Building on some articles that I’ve shared in the past, I’ll walk you through a sample application that displays the video from your webcam, applies image processing effects to that video, lets you take still snapshots of the filtered video and lets you serialize the snapshots so that they can be uploaded to a web server.
Make Your UI More Responsive with HTML5 Web Workers
Posted by John Robinson
on April 19, 2013
11 comments
Argh!!… Your web application has to sort a lot of data and you get the dreaded error message… “A script on this page may be busy, or it may have stopped responding…” Or maybe you’re writing some image processing code that takes forever on large images… Your UI is non-responsive. What are you going to do!!?… You could try to break up the work into small pieces and use timers to spread out the work. But what a PITA!
What if JavaScript had the ability to run your code in the background and not interfere with the responsiveness of your UI. What if you could spawn a thread to do long running computations such as image filtering and sorting. Well with HTML5 Web Workers you can do just that! In the rest of this article, I’m going to teach you how to use Web Workers within your own applications. Click here to try the sample app.
