Thursday, April 19th, 2007

Canvas Corner 1.0

Category: Canvas, UI, Unobtrusive JS

Christian Effenberger was inspired by the reflection code and decided to implement Corner.js.

The library uses unobtrusive JavaScript and microformats to allow users to simply add class names to an img tag to render them with corner effects, all via Canvas.

If you wanted to add a shaded corner you would say:

  1. <img src="..." class = "corner ishade50" />

Corners.js 1.0

Posted by Dion Almaer at 8:27 am

4.4 rating from 94 votes


Comments feed TrackBack URI

Looks amazing! Too bad it just works in 20% of all browsers and you can’t rely on it for a real design…

Comment by Sad Developper — April 19, 2007

Not sure what you mean by “can’t rely on it for a real design”, but in my opinion, it can be used in a production site or web app. It’s a cosmetic feature that wouldn’t limit any functionality. In addition, it gracefully degrades for IEs. Personally, I am not a huge fan on reflection of images but I like to make round corners of images. So this library is huge plus.

Comment by Kevin Hoang Le — April 19, 2007

There is an IE Canvas implementation out there, and it works just fine. With that you’ll have support for all the major browsers. I think this library is a great idea.

Comment by Adam Sanderson — April 19, 2007

Am I missing something or is this a step backwards in separation of presentation from markup? Assigning literal class names to tags is is not a best practice. The effect looks pretty bad too, but that’s another issue altogether.

Comment by Dan Ruspini — April 19, 2007

I’d be inclined to agree with Dan about that. Also, I’m not sure that simply putting values in a class attribute and referencing them in JS could be called a microformat.

Comment by Andy Hume — April 19, 2007

What doest this mean – “Freely distributable under GPL”, which is on the header of corner.js?

Can I use this on our commercial software? or we have to open source our software if we want to use this?

Comment by Shuo Geng — April 19, 2007

You are granted to freely use, reproduce, modify, distribute and publish.

Comment by Christian Effenberger — April 19, 2007

This is nice, but I agree with Dan and Andy that using @class is inappropriate. Things like this should ideally be done by getting the script to pick up CSS properties off the element.

Comment by Mark Birbeck — April 19, 2007

I think this looks like a great way to do rounded corners. If you manage to get IE working, it would be a huge plus though.

Comment by Will — April 19, 2007

if its just for images, why don’t you just edit the image in photoshop then you have less to load in the first place LMAO

Comment by jaimz — April 19, 2007

Because cornering 5000 images in Photoshop can be tiresome, retard.

Comment by Sebhelyesfarku — April 20, 2007

my IE7 foes not diaplay anything. (FF does…)

Comment by guy — April 21, 2007

it’s not supposed to without explorer canvas. sorry,

Comment by guy — April 21, 2007

Very cool, I think it would be great when it also support Flash Image Replacement’s capability.

Comment by Rizqi Ahmad — April 22, 2007

It is amazing to use for images. But is there any version to apply to as div container. In this way I could make rounded corners to boxes in websites.

Comment by Shane plasebo — April 22, 2007

That wouldn’t be possible since canvas cannot render html afaik. You’ll have to wait for CSS 3 on that one or use another library for round corners on borders.

It’s unfortunate this library doesn’t support Ie (not with excanvas either really, it’s too incomplete). But I still use it for the 20% that have it. Gives a nice touch in an easy way.

Comment by Fredric Georgsson — April 23, 2007

This lib looks great, and I really would like to use it, but when I try to put it in my code for some webdot generated graphs, it works but it does not support the map… any idea how I could have it working ?

Comment by Fulachier jerome — April 28, 2007

I played a bit with the script, but I cant find the way to set ‘ismap’ in the canvas object ;(

Comment by Fulachier jerome — April 29, 2007

Sorry, but usemap and ismap are not supported by the canvas object!

Comment by Christian Effenberger — April 30, 2007

do you think it is possible to put the canvas object in the object ? this way it could may be possible to apply the effect to the background image and keep a transparent one in the img.src to preserve the map…

Comment by Fulachier jerome — April 30, 2007

or may be it is possible to not remplace the img by the canvas, but create a bitmap with the canvas and put it in the img ?

Comment by Fulachier jerome — April 30, 2007

new version 1.2 supports usemap by creating canvas without replacing of the original image if it’s surrounded by a block element.

Comment by Christian Effenberger — May 1, 2007

Added support for Internet Explorer 6/7 in Corner.js 1.3

Comment by Christian Effenberger — May 10, 2007

Added an alternativ glossy shading script called “Glossy.js”

Comment by Christian Effenberger — June 7, 2007

The new version 1.3 works great with the Internet Explorer even thought it is a little bit more edgy. BUT: Some customer of mine said it has a detection of an IE / Windows Virus Exploit!!! Something in corner.js … don´t know where, yet. Boy do I hate Windows ;-)

Comment by WDPX — June 23, 2007

So do I.
The Virus/Exploit is falsely detected because of this single line…

document.namespaces.add(“v”, “urn:schemas-microsoft-com:vml”);

Comment by Christian Effenberger — June 27, 2007

Added soft shadow support for Internet Explorer 6/7 in 1.5

Comment by Christian Effenberger — August 3, 2007

I have the same problem with ie, my antivir toolkit says, that the corner.js is a exploit/virus.

Greetings, darki

Comment by darki777 — December 20, 2007

Leave a comment

You must be logged in to post a comment.