Canvas já não é mais uma funcionalidade tão nova, mesmo assim, vejo muita gente com medo de “mecher nisto”. Atualmente a grande maioria dos navegadores já suportam canvas e os outros (leia-se Internet Explorer) acabarão suportando em breve.

Agora iriei colocar aqui algumas dicas sobre como iniciar a trabalhar com canvas e também como importar imagens e desenha-las dentro do canvas.

Primeira coisa, você precisa do próprio elemento canvas e também trata-lo para aqueles aquele navegador que não suporta canvas.

    <body>
        <canvas id="elementoCanvas">
            O que for escrito aqui, aparecerá SOMENTE
            quando o navegador não puder renderizar o canvas
            Claro que tags HTML são aceitas.
        </canvas>
    </body>

Certo, agora, especificaremos uma função para manusear o canvas via javaScript

    </body>
    <script>
          // sim, addEventListener não funciona em IE
          document.addEventListener('load', canvasHandler, false);
    <script>
</html>

Bom. Assim que a página é carregada, nosso método canvasHandler será chamado. Vamos ver agora como abrir o canvas para iniciar os trabalhos via js.

// Vamos criar umas variáveis globais para facilitar
// mas fica mais "bonito" e organizado se utilizar namespaces
var canvas= null;
var ctx= null;
// aqui, a nossa função a ser chamada assim que a página carregar
canvasHandler= function(){
    // antes de tudo, simplesmente pegamos o elemento canvas
    canvas= document.getElementById('theCanvasElement');
    // agora nós precisaremos acessar o CONTEXT para trabalhar
    ctx= canvas.getContext('2d');
}

Ótimo, nós temos agora a variável canvas que é o próprio elemento HTML canvas. Enquanto a variável ctx tem o seu contexto. O context é o que utilizaremos para desenhar. Ele tem métodos e propriedades que nos permitirá interagir com o canvas em 2D.
Não, infelizmente canvas não suporta outros contextos, somente 2D até o momento.

Nosso canvas ainda não tem propriedades. Não tem uma largura nem altura, por exemplo. Vamos especifica-los

OBS: De agora em diante, todo o código javascript precisará estar dentro do corpo de nossa função canvasHandler, logo abaixo aquelas duas linhas exibidas anteriormente.

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

Provavelmente você sabe carregar uma imagem em js, certo? (também conhecido como preload):

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

Ok, você pode usar exatamente isto para inserir imagens dentro de seu canvas. Assim:

    // instancia uma nova imagem
    var img= new Image();
    // usaremos a imagem após ela ser carregada
    img.addEventListener('load', function(){
        // após baixar a imagem, podemos desenha-la no canvas
        ctx.drawImage(this);
        // onde this representa a imagem recém carregada
    });
    // então especificamos a url a iniciar o carregamento
    img.src= 'url.png';

Ok, agora você já deve ver a imagem dentro de seu canvas. O método drawImage suporta algumas estruturas/assinaturas diferentes em relação aos seus parâmetros:

    // desenha a imagem na posição left=30 e top=30
    ctx.drawImage(this, 30, 30);
    // desenhará a imagem na posição 0/0, alterando seu tamanho
    ctx.drawImage(this, 0, 0, 45, 75);
    // mais complexo, desenha e recorta a imagem (crop)
    ctx.drawImage(this, 0, 0, 150, 150, 0, 0, 480, 340);

Quando recortamos a imagem, especificamos a imagem propriamente dita (this), a posição a iniciar a exibição da imagem(0, 0), então o tamanho que desejamos recortar(150, 150). Em seguida vão os parâmetros para especificar o tamanho e posições em que a imagem realmente está (0, 0, 480, 340);

Em breve pretendo postar aqui como realmente desenhar no seu canvas, adicionando linhas, pontos e textos.