felipeNascimento.org(true);

Making the web a better place to live

Browsing Posts published in June, 2010

Well, canvas is not that young feature, even though, people are still afraid of using it. Most of our browsers can understand it, and the others (I mean, the Internet Explorer, the onlly one which can’t) will “learn” it soon.
Now, I want to put here some tips about how to start working with canvas easily, and also, how to import images and draw then into it.

First thing, you need a canvas element, and you need to treat it for those that which can’t render the canvas element properly.

    <body>
        <canvas id="theCanvasElement">
            whatever you write in here, will be shown ONLY
            when your canvas cannot be rendered.
            Of course, it accepts HTML tags
        </canvas>
    </body>

Ok, now, using event handlers we will treat it in our javascript

    </body>
    <script>
          // yes, addEventListener does not work on IE
          document.addEventListener('load', canvasHandler, false);
    <script>
</html>

Good. When our page is loaded, it will call our method canvasHandler. Let’s see how we will open the canvas to use with javascript:

// let's create some global variables.
// You can use it better with namespaces
var canvas= null;
var ctx= null;
canvasHandler= function(){
    // first of all, we simply get the canvas element itself
    canvas= document.getElementById('theCanvasElement');
    // now, we need to have the CONTEXT to work with
    ctx= canvas.getContext('2d');
}

Great, we have now in our variable canvas, the HTML canvas element itself. While the variable ctx has got its context. The context is what we will use to draw. It has the mothods and properties to allow us to interact with the canvas in 2D.
No, unfortunately it does not offer any other context besides 2D.
Our canvas still has no properties. It has no with and height, we can set it then.
From now on, all the javascript code must be set inside the canvasHandler function’s body, under those lines shown before.

    canvas.width= 480;
    canvas.height= 340;

You probably know how to load an image from js, right?

    var img= new Image();
    img.src= 'url.png';

Ok, you can use it to insert images inside your canvas. Just like this.

    // instantiate an image
    var img= new Image();
    // we need to use the image when it has finished to load
    img.addEventListener('load', function(){
        // after downloading the image, we can draw it into the canvas
        ctx.drawImage(this);
        // where this= the image just downloaded
    });
    // then, we say the image's url, to it start loading
    img.src= 'url.png';

Ok, now you can see an image inside your canvas. The drawImage method supports some different structures refered by its parameters:

    // draws the image in the position left=30, top=30
    ctx.drawImage(this, 30, 30);
    // draws the image in the 0/0 position, changing its size
    ctx.drawImage(this, 0, 0, 45, 75);
    // more complex, draws the image croping it
    ctx.drawImage(this, 0, 0, 150, 150, 0, 0, 480, 340);

When cropping, you specify the image (this), the position to start showing it (0, 0), then the size you want to crop it (150, 150). After that, you will tell the canvas the size and position the image really is(0, 0, 480, 340).

Soon, I’ll post about how to really draw into your canvas through javascript, adding lines, points and texts.

PHPDevBar has grown

2 comments

Hello folks.
I’m very proud to announce that our addon for firefox, focused on PHP Developers, the PHPDevBar (or PHP Developer ToolBar) has grown a lot and now has already reached the mark of 17 thousand downloads.

Thank you all for your feedback, which has helped us a lot increasing its quality.
If you are a PHP Developer and don’t know it yet, you can try it and then offer us your feedback.

https://addons.mozilla.org/pt-BR/firefox/addon/12686/

Twitter TT

No comments

It’s very impressive, the power the internet has nowadays.
Actually, Braziliam people are very present in the world wide internet and many times we simply don’t notice it.
The biggest example for now is the “CALA BOCA GALVAO”, an expression that toke the first position in the trending topics in the world.
Galvão is a sportist narrator, who some times speaks too much. Well, people from Brazil met themselves with this tool, on twitter and we can see how those things can grow extremely fast!

Pixlr

No comments

Hey folks.
I often use this great tool to do some quick changes on images, resize or mix files, etc. Then, I thought it would be nice to post here something about it.

Pixlr, at https://pixlr.com is a tool very similar to PhotoShop, but running on your browser (an online PhotoShop), and is also for free.
If you are used to the PhotoShop tools you can use it. It opens really faster, then you will not need to open the PhotoShop itself to make some little changes to a simple image. Plus, it has a firefox addon with which you can do a lot of things more.

It is, definitely worth it, to take some time to test it.
Of course, there are many features more in your PhotoShop, even thought, its a great, great option. I use it a lot by myself.