Thursday, December 15th, 2005

Killer effects with Canvas

Category: Canvas, UI

<p>Romain Guy is a top guy at Sun, known for his awesome effects and look and feels in Java Swing.

He had a look on the Ajax side recently though, when he took Canvas for a ride.

Take that rich UI frameworks! :)

Source Code

function drawCD() {
  var g2 = document.getElementById("cdCover").getContext("2d");

  g2.save();
  g2.translate(0, cdCase.height * 2 - 1);
  g2.scale(1, -1);
 
  g2.beginPath();
  g2.moveTo(0, cdCase.height / 2);
  g2.lineTo(cdCase.width, cdCase.height / 2);
  g2.lineTo(cdCase.width, cdCase.height + 1);
  g2.lineTo(0, cdCase.height + 1);
  g2.clip();

  g2.drawImage(cover, 19, 3, 240, 227);
  g2.drawImage(reflections, 0, 0);
  g2.drawImage(stitch, 19, 3);
  g2.drawImage(cdCase, 0, 0);

  g2.globalCompositeOperation = "destination-out";
  var alphaMask = g2.createLinearGradient(0, cdCase.height / 2, 0, cdCase.height);
  alphaMask.addColorStop(0, "rgba(255, 255, 255, 1.0)");
  alphaMask.addColorStop(1.0, "rgba(255, 255, 255, 0.5)");
  g2.fillStyle = alphaMask;
  g2.fillRect(0, cdCase.height / 2, cdCase.width, cdCase.height / 2);

  g2.restore();

  g2.drawImage(cover, 19, 3, 240, 227);
  g2.drawImage(reflections, 0, 0);
  g2.drawImage(stitch, 19, 3);
  g2.drawImage(cdCase, 0, 0);
}

The Effect

canvas-effects.jpg

Download the code

Related Content:

Posted by Dion Almaer at 1:28 am
4 Comments

+++--
3.8 rating from 8 votes

4 Comments »

Comments feed

Not to diss Romain, but I think he’s a student who is/was an intern at Sun.

Comment by Ron — December 15, 2005

Not to diss Romain, but I think he’s a student who is/was an intern at Sun.

What the hell? what’s that supposed to mean?

Romain is a visual innovator. I’ve been following Romains work for a while now, and he’s nothing short of a legend when it comes to progromattic visual enhancements.

Comment by mrGit — December 15, 2005

What’s the matter.
Intern or Not intern. Romain did and will do a great job.
We must appreciate his work for what he does, not who he is.

Comment by J-Chris — December 26, 2005

I think Ron was just pointing out that he is not a “top guy at Sun” as the article indicates.

That’s why the post begins “Not to diss Romain.”

Calm down.

Comment by MH — December 27, 2005

Leave a comment

You must be logged in to post a comment.