Tag: canvas

Simple steps to create an instagram-like Video Boomerang effect on the web

I've encountered a bug in Chrome on Android where MediaRecorder, using Canvas.captureStream(), fails to encode video from large canvas elements (e.g., 1280x720). While the process works on desktop Chrome, on Android, the recording stops abruptly at unpredictable points, likely due to limitations in the MediaRecorder API's encoding capabilities. A smaller canvas (640x480) works fine, suggesting resolution-based limitations. I've reported this as Chrome bug 897727 and created a demo to illustrate the issue.

This post details how to use the HTML5 canvas element to dynamically create visually appealing custom markers for Google Maps. Instead of using a server to generate marker icons, we leverage the canvas API to draw rounded rectangles with gradients, center text within them and ultimately convert them into data URIs. Using the HSL color model allows for the creation of a harmonious range of colors by adjusting the hue while maintaining consistent saturation and luminance. This client-side approach offers flexibility and control over marker appearance, specifically highlighting techniques for rounded corners, gradients, and text centering. The code examples provided demonstrate the process of generating these markers and integrating them into a map.

I recently discovered a cool trick in WebKit that lets you use a canvas element as a background image, which opens up a ton of creative possibilities. It's a powerful feature, allowing for dynamic, programmatic manipulation of background images. I've included a simple demo showing how to draw a square on a div's background, but imagine the possibilities for games or complex animations! While currently WebKit-specific, I hope other browsers will adopt it soon. More demos to follow!