Category Archives : Javascript Tutorials

HTML5 Canvas: Smooth, variable width lines with transparency. 2

When making a drawing app with HTML5 canvas, you might come up against the problem of making a smooth, variable width line. Eventually you might find that you can make several calls to ctx.quadraticCurveTo(x,y,xc,yc) and get some kind of effect. If you stroke every 2 or 3 points, then as long as the line width is very small, you won’t notice the jaggedness. Unfortunately, if you try to do this with semi-transparent lines, the effect is truly horrible. To solve this problem, instead of drawing lines, I simply draw very thin shapes, and fill them with a color. This allows for 1) variable thickness and 2) nice transparency. Variable transparency is a problem I haven’t quite figured out yet. It may require composing the shape from individual pixels, which is simply too slow, especially in IE. What I am writing is a drawing App that works with the Wacom Web Plugin, and therefore varies line thickness based on pressure. I would like to vary opacity too, but this seems problematic right now. A solution that may be possible is to fill the shape with a complex gradient, if it is possible to create semi-transparent stops. Here is an image of what the program does so far:   Each line is actually a full shape, with varying degrees of opacity. Thickness and thinness is accomplished with pen pressure from the Wacom Intuous5 tablet. As the line is drawn, a temporary line is shown to the user, when they lift the pen, that line disappears, and a […]


HTML5 Canvas, Pixel Compositing, Transparency, and why all the trivia!

One thing I really hate about new technology are all the early adopters who incessantly post the same trivial examples. They cross link them too. So you can go from one page to the next, and see essentially the same example, just with the bits renamed or moved around. At a certain point, I got it into my head that I wanted to make a quickie HTML5 App that works with my Intuous5 Wacom Pad. Wacom has a web plugin that let’s you get data about pen pressure and so on from the tablet. So I started to work on it, and found the said trivial examples and started mashing something up. Pretty soon it became apparent that if I wanted my lines to look good, I might have to anti-alias them, or so I am trying, I don’t know if it will work, because I just spent the better part of 2 hours looking for a solution to a simple problem. If you look for examples of pixel level manipulation for HTML5 Canvas, you will find the same trivial examples over and over again, which basically say: var id = context.createImageData(1,1); var d =; d[0] = r; // where r is 0…255 … context.putImageData(id,x,y); If you actually want a full trivial example, use google, they abound. The problem with the above is: it replaces the entire pixel, all the way to the background, erasing any colors beneath it. The alpha channel of the pixel doesn’t make it transparent to what was under the […]

Qt C++: Threaded Communication with Artema Hybrid on Linux

Communicating with an Artema Hybrid CC Payment device is actually deceptively simple. I’ve written an application what uses a webkit widget exclusively for the UI display, and so I hook into the Javascript to provide some extra functionality to the app, in this case, reading and writing to/from the Artema Hybrid device. The documentation that I received was in German exclusively, so this took a bit of work to get going, but once you have it down it’s very easy. The device is connected via it’s POS connection Serial->RJ45 connection to a Serial->USB (FTDI chipset) converter that gets plugged into a usb port. You use the standard open, read, write and close functions. The Artema Hybrid constantly communicates with your system, so you’ll need to create a QThread to run in the background reading from the device once every second. The Artema Hybrid will send you an ENQ (0×05) and you need to respond with either an ACK (0×06) or an STX (0×02). With the way that I have it set up, the c++ code does the absolute minimum required which is it reads from the device and emits a dataRead() signal which is connected in Javascript. If I read ENQ, then I emit dataRead(“ENQ”). and in the Javascript function that is connected to the dataRead() signal, I see if the string passed up == ENQ. In the javascript, I have an array of data to write to the device, if that array is empty, I just write back to the Device ACK, otherwise, I […]

Rails will_paginate links to wrong page 4

Well, While setting up a website today I found a bit of retardation in will_paginate. Aside from poor and complicated documentation and an incredible amount of bloat for what amounts to a very simple kind of website component, I found that will_paginate was linking to /?page= on a page that showed in the url bar as /products, so the link should have been /products?page=. So I looked around for a quick fix, and this is the best I got: Revisited: roll your own pagination links with will_paginate and Rails 3 OH MY GAWD. You have to be shitting me. That is hands down the most retarded thing I have ever seen. So, like the little hack monster that I am, I did it faster and easier with less code. If you want to change the pagination links, you can do it with jQuery. $(‘div.pagination a’).each(function () { var url = $(this).attr(‘href’); url = url.replace(‘/’,”); $(this).attr(‘href’,url); }); Why? Because ideally, will_paginate shouldn’t give a shit about the url, that’s not its job, that’s my job, its job is to ADD get parameters, and manage what those parameters should be, anything else is retarded.

HowTo JavaScript/jQuery place divs in a circle, calculate a cirlce etc. 4

So, I was working with my father, a physicist and mathematician, who wants to have a little math example done in javascript. We haven’t finished the meat and potatoes of the project, but one hurdle was the necessity to place 8 divs in a circle on the page. This is a variation on the Tirgrams and Clifford Algebras demonstration that comes with the Mathmatics software Wolfram. Essentially this displays the trigrams in a clock formation, right to left around a circle. I looked around for a few examples and none of them seemed to work out the way I wanted them too, so I asked him to help and this is what we came up with. //trigrams are a class that contain divs displaying 1 of 8 trigrams. function draw() { var windowWidth = $(window).width(); var windowHeight = $(window).height(); var center = {x: windowWidth / 2 – 100,y: windowHeight / 2}; //100 is the width of the div var doc = 150; // radius var cpos = {x: center.x, y: center.y – doc }; //because the first div needs to be on top for (var i in trigrams) { trigrams[i].css({top: cpos.y, left: cpos.x, position: ‘absolute’});//this method just sets the .css left and top cpos = {x: cpos.x – center.x, y: cpos.y – center.y}; cpos = get_position(cpos.x,cpos.y); cpos.x = center.x + cpos.x; cpos.y = center.y + cpos.y; $(‘body’).append(trigrams[i]); } } function get_position(x,y) { var z = x; x = 1/Math.sqrt(2) * (z – y); y = 1/Math.sqrt(2) * (z + y); return {x: x, y: y}; […]