Making the web a better place to live

Browsing Posts in JavaScript

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.

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

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

          // yes, addEventListener does not work on IE
          document.addEventListener('load', canvasHandler, false);

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
        // 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.

Hey folks.
I prepared this small function to use, once it’s many times needed and we don’t have it natively in JavaScript. I have many times searched for it through google and couldn’t find a reall interesting lib to it.
Then, I prepared this one.
You can see the example of the output in my projects directory. And you can download the print_j js.

Ajax Push / Comet with PHP

No comments

Yes, it is possible.
There are many ways to implement Ajax push with PHP. In this case, we will study a way to do so, by using javascript with PHP forcing the page flush, from server side.
First of all, we must understand the ajax… Ajax asks the server for something

function forceFlush()

Two interesting JavaScript functions

No comments

Two interesting functions in JavaScript I’ve created due to “fix” a few problems I’ve fought against.
Both functins exist in PHP, and I needed to use’em in my client side.
The first one, is the strrev function. Javascript has in the Array prototype, the function reverse, but not in strings. Then, here goes the “one line” function to revert strings in javascript.
continue reading…

Absurd error using Internet Explorer

No comments

Today, I fought with the following error in Internet Explorer: System Erro: -1072896658
I got curious, once it used to work prefectly in all the browsers, Internet epxlorer was blowing the error to me(ok, it is not a surprise at all)!
After a lot of tests and have searched all the web, I found out that our friend IE culdn’t build the Ajax object when it had come back if the charset of the current page was UTF-8. The solution? The absurdest one. I just had to change its charset to utf-8… yes, in lower-case.
Just the case changed the page itself.
I hope this post will help someone.

Hoje me deparei com o seguinte erro no Internet Explorer: Erro de sistema: -1072896658 Fiquei curioso, uma vez que funcionava perfeitamente para todos os navegadores, exceto IE(o que não é nenhuma surpresa)! Apos muitos testes, e boas pesquisas na web, descobri que o IE nao conseguia construir o objeto ajax no seu retorno, caso o charset da página estivesse setado para UTF-8. A solução? Mais absurda que o problema, bastou setar o charset para utf-8. Sim, minúsculo, apenas. Espero que acabe ajudando alguem com isto, ja que me deu uma certa dor de cabeça.