Results for tag: canvas
There are a number of JavaScript libraries out there that allow you to manipulate images with various filters and effects and a recent one that I have been playing around with is called Pixastic. In simple terms, Pixastic turns an image into html5 CANVAS and then it does pixel manipulation. It has good documentation and even a nice photo editor. But, I don’t want to just change an image by applying a filter, I would like to show the whole transition. For example, instead of turning an image from color to black and white, I want to show an animation of the image slowly transitioning from color to black and white. Here’s how it can be done with Pixastic.
Read more
I was reading an article about HTML5 video controls today and I noticed that they mention changing the video playbackrate attribute to control how fast a movie is playing. This is a great attribute but unfortunately, it is only currently supported by Chrome and Safari. But, messing around with CANVAS recently made me realize that this could easily be done with CANVAS. We are already grabbing each frame of the video so slowing down the drawing loop should give you slow motion.
Read more
Last week, I wrote about making YouTube screenshots and creating video effects with HML5 canvas, and now I want to follow up and show how you can split a video into many draggable CANVAS objects. It is a bit similar to Craftymind’s video blow out demo and Matt Greer’s Movie Puzzle but with two major differences.
First of all, I wanted to keep the code small and simple, and secondly, I am building and drawing into many CANVAS elements instead of using one CANVAS. This is mostly to support the drag and drop functionality, allowing the end user to move the video tiles around the page. Draggable functionality is simply added with the jQuery UI draggable function applied on each CANVAS element. So, how does this all work?
Read more
I have seen a lot of cool HTML5 demos lately and wanted to go over a simple example of leveraging the HTML5 Canvas tag to add filters to a video file. In other words, load a video into a video tag, draw each frame into a CANVAS element, loop through some pixel manipulation that changes each frame, and thus make video filters like shifting colors, tinting, or making the video grayscale.
If you are just starting with HTML5, the following links do a great job describing the basics of CANVAS and an overview of HTML5. You could also check out my recent demo of pulling YouTube videos into CANVAS in order to make video screenshots. This time around, I want to do something much more basic, work with a local video file, and do some simple pixel manipulation. So, how do we use the <video> and <canvas> elements together?
Read more
Have you ever wanted to easily grab an image from a youtube video and save the screenshot to your computer? After reading a blog post on drawing video frames into the canvas element I wondered if this concept could be extended for YouTube videos. If I save a YouTube video using a chrome extension and then load the video locally it works perfectly, but the whole idea is to be able to do this without downloading the video first.
So, first of all, we need to somehow load YouTube’s actual video files into the HTML5 video tag. At first, I tried using a call to YouTube’s get_video_info script (http://www.youtube.com/get_video_info?video_id=VIDEOID) via a simple php proxy and this did give me lots of different video urls based on quality and formats for a particular YouTube video. Unfortunately, this only worked when I was testing on my own machine. The video urls failed to work on my web server.
Read more
Let’s learn more about Canvas through some examples posted on jsFiddle. Below you will find a ton of hand picked links to some awesome demos and examples of how you can use Canvas:
Cool Canvas Image Effects
Read more
