Writing Text on canvas is pretty straightforward. All we need to know about is certain properties and methods that are pre-defined on the canvas’s context. You can draw/write all unicode characters using the related methods.
Tag: javascript
HTML5 Canvas Drawing Lines with Smooth Edges
In the previous post we kicked off with our painting application using HTML5 canvas. If you remember well, we ended up with a basic app where one can easily draw lines or something else with a “pencil” tool. But there was a problem. When drawing different shapes like circles, the lines/curves had jagged edges. They were not smooth or anti-aliased, whatever you want to call them. This article will aim towards solving those issues.
Continue reading “HTML5 Canvas Drawing Lines with Smooth Edges”
Creating a Paint Application with HTML5 Canvas
Let’s build a simple painting (or sketching) application using HTML5 <canvas> element along with its Javascript API. Although the app will be small, there’s going to be quite a bit of information for intake. So I’ll break the entire process into different tutorials (posts).
Continue reading “Creating a Paint Application with HTML5 Canvas”
Controlling the Volume of an Audio File in Javascript
Just another quick tip. I’ll show you how to change the volume of an audio file of whatever format you are using – mp3, ogg, wav, aac, etc.
Continue reading “Controlling the Volume of an Audio File in Javascript”
20+ Best Canvas Tutorials and Examples That Will Make You A Canvas Master
Every now and then a new technology releases giving better features and advantages over the previous ones but learning them all without spending a lot of time can be a pain. HTML5 <canvas> element is one of those technologies which is used to draw graphics, on the fly, on a web page via scripting (normally JavaScript). Learning <canvas> is not hard at all but due to a lack of good tutorials around the web makes it difficult to understand, specifically for newcomers.
Continue reading “20+ Best Canvas Tutorials and Examples That Will Make You A Canvas Master”
Creating the Environment To Write Code and Render in Realtime
After the Introduction, its time to build things! We will basically lay out a basic UI for the playground and learn how to render our code in the sandbox.
Continue reading “Creating the Environment To Write Code and Render in Realtime”
Building Your Own HTML, CSS, JS Realtime Playground
Many months ago I built this site called CSSDeck. Its an interesting app where you can write your HTML, CSS, JS code inside few code editors that gets rendered and displayed in realtime in an output area (sandbox). Similar to JSFiddle, yeh! But the intent was a bit different. Instead of aiming for a playground where people could just create testcases, I wanted to build a community of people who would create some cool creations with their CSS3 and Javascript skills and all I would do is feature them on the Home Page of the site. Whatever people submit shows up in their profile page which means they can share their profile link with anyone and show off how awesome they are.
Continue reading “Building Your Own HTML, CSS, JS Realtime Playground”