Blog Post

HTML5 - Canvas API

Sign in to queue

The Discussion

  • User profile image
    Elton777

    Show!

     

  • User profile image
    ORlando

    muito louco esse canvas!

  • User profile image
    Leonardo​Almeida

    O Canvas é bem melhor q o anterior 

  • User profile image
    Ademilson

    Canvas \o/

  • User profile image
    Wellington Cesar

    Estranho no meu Chrome não está entendendo a linguagem e assim, meu browser não me mostra nada! Será que devo utilizar algum outro?

  • User profile image
    Alexandre

    Cavas muito bom vó largar o flex de vez!

  • User profile image
    Mauricio

    Para funcionar no Firefox 16 foi necessário especificar o tipo de script na tag <script>, deste modo:
    <script type="text/javascript">
    Sem isso, não funcionou.
    Também não dá para esquecer de substituir as aspas inclinadas por caracteres ASCII.

    Meu código funcionou assim:
    <canvas id="x" width="300" height="300"></canvas>
    <script type="text/javascript">
    function desenhar(){
    // Obtemos o contexto
    context=document.getElementById('x').getContext('2d');
    //Iniciamos um novo desenho
    context.beginPath();
    //Movemos a caneta para o inicio do desenho
    context.moveTo(150,50);
    //Desenhamos as linhas
    context.lineTo(220,250);
    context.lineTo(50,125);
    context.lineTo(250,125);
    context.lineTo(80,250);
    context.lineTo(150,50);
    //O desenho não é de verdade enquanto você
    //não mandar o contexto pintá-lo.
    //Vamos pintar o interior de amarelo
    context.fillStyle='#ff0';
    context.fill();
    //Vamos pintar as linhas de vermelho.
    context.strokeStyle='#f00';
    context.stroke();
    }
    </script>

  • User profile image
    Ruggeri

    show

  • User profile image
    Giovanni Amorim

    Nada disso funcionou comigo!

  • User profile image
    Eliana

    Nada funcionou comigo também.

  • User profile image
    Ronaldo

    Acho que poderiam postar quais navegadores funcionam em qual aula...

    Microsoft o IE 9 não funciona isso! Aceitem por favor :/

  • User profile image
    Jonatas

    Não funcionou em nenhum dos códigos. Sem a especificação de script apenas aparece o botão desenhar, mas quando clico não mostra nada. Ao especificar como javascript, não mostra nada...

  • User profile image
    Fabricio Dupin

    Agora sim com a declaração do text/javascript e a correção das aspas

    Segue o código

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>Canvas API</title>
    </head>
    <body>
    <canvas id="x" width="300" height="300"></canvas>
    <button onclick="desenhar()">desenhar</button>
    <script type="text/javascript">
    function desenhar(){
    // Obtemos o contexto
    context=document.getElementById('x').getContext('2d')
    //Iniciamos um novo desenho
    context.beginPath()
    //Movemos a caneta para o inicio do desenho
    context.moveTo(150,50)
    //Desenhamos as linhas
    context.lineTo(220,250)
    context.lineTo(50,125)
    context.lineTo(250,125)
    context.lineTo(80,250)
    context.lineTo(150,50)
    //O desenho não é de verdade enquanto você
    //não mandar o contexto pintá-lo.
    //Vamos pintar o interior de amarelo
    context.fillStyle='#ff0'
    context.fill()
    //Vamos pintar as linhas de vermelho.
    context.strokeStyle='#f00'
    context.stroke()
    }
    </script>
    </body>
    </html>

  • User profile image
    markosfox1

    Basta trocar as aspas e o código funciona. Não é necessário o uso do script "<script type="text/javascript">"

     

  • User profile image
    Thadeu Esteves

    Com certeza , canvas é bem melhor!!!

  • User profile image
    alexsandro

    viva canvas _o/ muito show

  • User profile image
    CarlosSmp

    Legal como faríamos pra permitir desenho livre como no paint?
    alguém sabe ou seja desenhar com o mouse na tela...

  • User profile image
    Novattu

    FAIL de novo !!

  • User profile image
    Lucas

    IE? =/

  • User profile image
    gilson

    show de bola

Add Your 2 Cents