Meta tags:
description=A tag HTML canvas define uma área para desenhar gráficos, formas, texto e animações com JavaScript. Conheça dimensionamento, acessibilidade e canvas vs SVG.;

Headings (most frequently used words):

canvas, tag, html, exemplo, da, atributos, usada, para, vs, svg, qual, usar, dimensionamento, os, width, height, versus, css, sintaxe, casos, de, uso, comuns, acessibilidade, prática, resultado, texto, desenhar, uma, linha,

Text of the page (most frequently used words):
#canvas (73), html (63), para (30), svg (26), com (17), que (17), css (16), aprender (15), atributos (15), desenho (13), width (12), height (12), você (12), tag (12), elemento (11), ctx (11), pixels (10), script (10), contexto (9), javascript (8), como (8), tags (8), html5 (8), qual (7), tamanho (7), document (7), formas (7), não (7), gráficos (7), body (7), desenhar (7), title (7), todos (6), bitmap (6), define (6), retorna (6), são (6), const (6), canvasexample (6), w3docs (5), prática (5), por (5), buffer (5), 600px (5), 300x150 (5), mas (5), getcontext (5), stroke (5), dom (5), exemplo (5), img (5), uma (5), conteúdo (5), quando (5), quadro (5), imagens (5), fillstyle (5), head (5), texto (5), introdução (5), formatter (5), color (5), code (4), generator (4), acessibilidade (4), dimensionamento (4), navegador (4), desenha (4), objeto (4), fillrect (4), elementos (4), navegadores (4), sem (4), apenas (4), cada (4), copiar (4), getelementbyid (4), the (4), doctype (4), caminho (4), use (4), context (4), font (4), resolução (4), pode (4), json (3), encoder (3), editor (3), ferramentas (3), quizzes (3), exercícios (3), php (3), sintaxe (3), usar (3), seu (3), permanece (3), renderização (3), chama (3), atributo (3), aria (3), label (3), entre (3), dentro (3), exibido (3), suporte (3), portanto (3), vez (3), necessário (3), muitos (3), objetos (3), jogos (3), base (3), experimente (3), mesmo (3), 1c87c9 (3), style (3), ponto (3), cor (3), mais (3), linha (3), defina (3), canto (3), superior (3), esquerdo (3), área (3), métodos (3), diferentes (3), ser (3), templates (3), string (3), tools (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), idioma (2), sobre (2), beautifier (2), diff (2), password (2), python (2), java (2), git (2), livros (2), snippets (2), web (2), casos (2), uso (2), comuns (2), versus (2), this (2), page (2), caption (2), button (2), verificar (2), nítido (2), estica (2), borrado (2), distorcido (2), acontece (2), draw (2), método (2), comandos (2), evento (2), globais (2), pois (2), role (2), alternativo (2), significativo (2), saída (2), leitores (2), tela (2), desenhado (2), visualização (2), dados (2), gradiente (2), gradientes (2), pinta (2), vídeo (2), filtros (2), criar (2), strokestyle (2), 150 (2), 300 (2), lineto (2), moveto (2), beginpath (2), your (2), browser (2), support (2), caminhos (2), atual (2), seja (2), preenchido (2), usada (2), filltext (2), 200 (2), 400 (2), propriedade (2), mesma (2), chame (2), text (2), resultado (2), abaixo (2), propriedades (2), definir (2), retângulo (2), está (2), coordenadas (2), aumentando (2), dpr (2), devicepixelratio (2), definem (2), página (2), tem (2), redesenhar (2), tiver (2), efeitos (2), interativas (2), via (2), baseado (2), modo (2), algo (2), círculo (2), animações (2), scripts (2), accept (2), dir (2), formulários (2), referência (2), tutorial (2), url (2), http (2), iso (2), hash (2), 2026, direitos, reservados, feito, desenvolvedores, política, privacidade, contato, empresa, try, tutoriais, exemplos, gratuitos, desde, 2014, next, previous, yes, was, helpful, espaço, extra, fica, transparente, mantém, original, ignora, completamente, cresce, automaticamente, tornando, createcontext, getdrawing, superfície, suporta, largura, altura, descrição, valor, interativos, espelhe, controles, estado, reais, botões, regiões, dinâmicas, desenhadas, focalizáveis, nem, legíveis, estático, adicione, descrevendo, bar, chart, 2024, sales, labelledby, tudo, exposto, tecnologia, assistiva, descreva, escrever, mensagem, genérica, forneça, outras, tecnologias, assistivas, conseguem, ver, foi, torne, acessível, esses, recursos, dependem, bom, domínio, ajuda, aproveitar, máximo, escolha, preferida, repintar, razão, pela, bibliotecas, construídas, ele, produzem, preenchimentos, traços, createradialgradient, createlineargradient, outro, serve, edição, fotos, drawimage, limpe, redesenhe, loop, produzir, movimentos, suaves, requestanimationframe, animação, além, simples, permite, ricos, does, not, border, 1px, solid, cccccc, linhas, outros, desenhados, três, etapas, levanta, caneta, posiciona, partida, adiciona, segmento, reto, até, novo, ainda, nada, pintado, somente, efetivamente, renderiza, usando, contorno, separado, comece, primeiro, caso, contrário, novos, segmentos, adicionados, anterior, quiser, contornado, fill, 100, example, 30pt, calibri, abreviada, seguida, par, aqui, posição, observe, definidos, corresponda, desenhamos, doesn, element, obtém, obter, contém, escolhe, preenchimento, cujo, começam, direita, baixo, vem, pares, escrito, abertura, fechamento, nítida, telas, alta, densidade, retina, escale, pelo, depois, antes, scale, csswidth, window, 300px, risky, stretches, default, 600x300, blurring, good, drawing, matches, what, you, forem, caber, caixa, sempre, posicionar, corresponder, medida, borra, distorce, este, problema, comum, dois, tamanhos, frequência, partículas, tempo, real, processamento, número, moderado, precisem, acessíveis, escaladas, perda, qualidade, ícones, diagramas, regra, geral, destaca, menos, permanecem, mudando, rapidamente, estilizado, manipulado, independente, qualquer, zoom, retido, vira, plano, guarda, memória, das, individuais, possível, anexar, ouvintes, eventos, forma, mover, limpar, toda, cena, imediato, tanto, quanto, desenham, funcionam, maneiras, fundamentalmente, padrão, alterar, melhor, evitar, deve, fornecer, antigos, suportam, desativado, tenham, renderizar, consulte, trabalhar, importante, distinguir, conceitos, frequentemente, confundidos, incorporado, suas, ter, dos, ela, onde, podemos, composições, fotográficas, meio, geralmente, utilizar, contêiner, conheça, charset, checked, autoplay, action, accesskey, colspan, defer, autofocus, autocomplete, draggable, download, disabled, coords, controls, contenteditable, content, async, alt, attribute, reference, forms, vídeos, youtube, multimídia, media, class, obsoletos, attributes, radial, lineargradient, sombras, projetadas, desfoque, aos, stroking, path, polyline, polygon, elipse, desenhando, xmp, wbr, video, var, track, time, thead, tfoot, textarea, template, tbody, table, sup, summary, sub, strong, strike, span, spacer, source, small, select, section, samp, ruby, rtc, progress, pre, picture, plaintext, param, output, option, optgroup, object, noscript, noframes, nobr, nav, meter, meta, menuitem, menu, marquee, mark, map, main, link, legend, keygen, kbd, isindex, ins, input, iframe, hgroup, header, frameset, frame, form, footer, figure, figcaption, fieldset, embed, div, dialog, dfn, details, del, datalist, data, colgroup, col, cite, center, blockquote, blink, big, bdo, bdi, basefont, audio, aside, article, area, applet, address, acronym, abbr, obsoletas, xhtml, tabela, tipos, mime, mensagens, status, atalhos, teclado, entidades, codificação, utf, códigos, 8859, ascii, conjuntos, caracteres, references, migração, áudio, semânticos, layout, computercode, arquivo, estilos, blocos, tabelas, comentários, cores, listas, links, formatação, títulos, básicas, editores, basics, entrar, pesquisar, formatters, reverse, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, general, cursos,

Text of the page (random words):
tag html canvas w3docs w3docs livros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python cursos quizzes exercícios snippets ferramentas general tools html editor password generator html encoder code diff json beautifier todos os 13 color tools color picker color converter color mixer color hex colors hsl todos os 10 string tools string length calculator md5 hash generator sha256 hash generator string reverse url encoder todos os 19 code formatters javascript formatter css formatter html formatter json formatter php formatter pesquisar na w3docs k pt english en deutsch de русский ru français fr español es português pt italiano it entrar aprender html html basics introdução ao html editores e ferramentas elementos html tags básicas do html atributos html títulos html formatação html links html listas html cores em html comentários html tabelas html blocos html scripts html estilos html css caminhos de arquivo html html computercode html templates templates de layout templates de formulários html 5 introdução ao html5 tags html5 elementos semânticos áudio vídeo suporte a navegadores html5 migração para html5 html references conjuntos de caracteres ascii iso 8859 1 códigos de idioma iso codificação utf 8 entidades html atalhos de teclado métodos http imagens html mensagens de status http tipos mime tabela de tags html xhtml html url html tags tags obsoletas atributos globais html atributos de evento tags html doctype a abbr acronym address applet area article aside audio b base basefont bdi bdo big blink blockquote body br button canvas caption center cite code col colgroup data datalist dd del details dfn dialog dir div dl dt em embed fieldset figcaption figure font footer form frame frameset h1 h6 head header hgroup hr html i iframe img input ins isindex kbd keygen label legend li link main map mark marquee menu menuitem meta meter nav nobr noframes noscript object ol optgroup option output p param plaintext picture pre progress q rb rp rt rtc ruby s samp script section select small source spacer span strike strong style sub summary sup svg table tbody td template textarea tfoot th thead time title tr track tt u ul var video wbr xmp canvas tutorial introdução ao canvas desenhando no canvas coordenadas do canvas gradientes no canvas texto no canvas imagens no canvas referência do canvas svg tutorial introdução ao svg svg no html5 retângulo svg círculo svg svg elipse linha svg svg polygon svg polyline svg path svg text svg stroking introdução aos filtros svg efeitos de desfoque svg sombras projetadas svg svg lineargradient gradiente radial svg referência svg html attributes atributos obsoletos atributo class do html atributo id do html html media html multimídia vídeos do youtube em html html forms formulários html html attribute reference alt async accept content contenteditable controls coords disabled download draggable autocomplete autofocus defer dir colspan accesskey action autoplay checked accept charset tag html canvas a tag html canvas define uma área para desenhar gráficos formas texto e animações com javascript conheça dimensionamento acessibilidade e canvas vs svg a tag canvas é um dos elementos html5 ela define uma área na página web onde podemos criar diferentes objetos imagens animações e composições fotográficas por meio de scripts geralmente javascript é necessário utilizar um script para desenhar gráficos pois a tag canvas é apenas um contêiner para gráficos ao trabalhar com canvas é importante distinguir entre conceitos como o elemento canvas e o contexto de um elemento que frequentemente são confundidos o elemento é o que está incorporado ao html o nó do dom um contexto canvas é um objeto com suas propriedades e métodos de renderização o contexto pode ser 2d ou 3d o elemento canvas pode ter apenas um contexto você deve fornecer conteúdo alternativo dentro da tag canvas para que navegadores mais antigos que não suportam canvas navegadores com javascript desativado e leitores de tela tenham algo significativo para renderizar consulte acessibilidade abaixo você pode usar css para alterar o tamanho exibido do canvas mas é melhor definir a resolução com os atributos width e height no canvas seja no html ou via javascript para evitar um bitmap borrado ou distorcido por padrão um elemento canvas tem um tamanho de 300x150 pixels canvas vs svg qual usar tanto canvas quanto svg desenham gráficos no navegador mas funcionam de maneiras fundamentalmente diferentes canvas é baseado em pixels modo imediato ao desenhar algo o resultado vira um bitmap plano o navegador não guarda memória das formas individuais não há dom para o conteúdo desenhado portanto não é possível anexar ouvintes de eventos a uma forma para mover um círculo é necessário limpar e redesenhar toda a cena a cada quadro svg é baseado em formas modo retido cada elemento permanece no dom pode ser estilizado com css manipulado via script e é independente de resolução permanece nítido em qualquer zoom use canvas quando você redesenhar com frequência ou tiver muitos objetos jogos efeitos de partículas visualização de dados em tempo real processamento de imagens use svg quando tiver um número moderado de formas que precisem ser interativas acessíveis ou escaladas sem perda de qualidade ícones gráficos diagramas como regra geral canvas se destaca em muitos pixels mudando rapidamente svg em menos formas que permanecem interativas dimensionamento os atributos width height versus css este é o problema mais comum com canvas um canvas tem dois tamanhos os atributos width e height definem o tamanho do buffer de desenho a resolução do bitmap em pixels width height em css definem o tamanho exibido na página se forem diferentes o navegador estica o bitmap para caber na caixa css o que borra ou distorce o desenho sempre defina os atributos com a resolução em que você desenha use css apenas para posicionar o elemento se corresponder à mesma medida good drawing buffer matches what you draw canvas width 400 height 200 canvas risky css stretches a default 300x150 bitmap to 600x300 blurring it canvas style width 600px height 300px canvas copiar para saída nítida em telas de alta densidade de pixels retina escale o buffer pelo window devicepixelratio por exemplo defina os atributos como csswidth devicepixelratio e depois chame ctx scale dpr dpr antes de desenhar sintaxe a tag canvas vem em pares o conteúdo é escrito entre as tags de abertura canvas e fechamento canvas exemplo da tag html canvas o script abaixo obtém o elemento com document getelementbyid e chama getcontext 2d para obter o contexto de desenho 2d o objeto que contém todos os métodos e propriedades de desenho definir fillstyle escolhe a cor de preenchimento e fillrect x y width height pinta um retângulo preenchido cujo canto superior esquerdo está em x y as coordenadas do canvas começam em 0 0 no canto superior esquerdo com x aumentando para a direita e y aumentando para baixo doctype html html head title title of the document title head body canvas id canvasexample your browser doesn t support the html5 canvas element canvas script const c document getelementbyid canvasexample const ctx c getcontext 2d ctx fillstyle 1c87c9 ctx fillrect 10 50 80 80 script body html copiar experimente você mesmo resultado exemplo da tag html canvas usada para texto para desenhar texto defina a propriedade font com a mesma sintaxe da propriedade abreviada font do css e fillstyle para a cor em seguida chame filltext text x y o par x y aqui é a posição da linha de base do texto não o canto superior esquerdo observe que width e height são definidos como atributos no elemento para que o buffer de desenho corresponda à área em que desenhamos doctype html html head title title of the document title head body canvas id canvasexample width 400 height 200 canvas script const canvas document getelementbyid canvasexample const context canvas getcontext 2d context font 30pt calibri context fillstyle 1c87c9 context filltext canvas example 50 100 script body html copiar experimente você mesmo exemplo da tag html canvas usada para desenhar uma linha linhas e outros caminhos são desenhados em três etapas moveto x y levanta a caneta e a posiciona em um ponto de partida sem desenhar lineto x y adiciona um segmento reto do ponto atual até o novo ponto mas ainda nada é pintado somente stroke efetivamente renderiza o caminho usando o strokestyle atual a cor do contorno quando você desenha mais de um caminho separado comece cada um com beginpath primeiro caso contrário novos segmentos são adicionados ao caminho anterior use fill com fillstyle em vez de stroke quando quiser que um caminho seja preenchido em vez de contornado doctype html html body canvas width 300 height 150 style border 1px solid cccccc id canvasexample your browser does not support the html5 canvas tag canvas script const c document getelementbyid canvasexample const ctx c getcontext 2d ctx beginpath ctx moveto 0 0 ctx lineto 300 150 ctx strokestyle 1c87c9 ctx stroke script body html copiar experimente você mesmo casos de uso comuns além de formas simples o contexto 2d permite criar gráficos ricos animação limpe o canvas e redesenhe dentro de um loop requestanimationframe para produzir movimentos suaves quadro a quadro imagens ctx drawimage img x y pinta um img outro canvas ou um quadro de vídeo o que serve de base para edição de fotos e filtros gradientes createlineargradient e createradialgradient produzem preenchimentos e traços com gradiente jogos e visualização de dados canvas é a escolha preferida quando é necessário repintar muitos objetos a cada quadro razão pela qual bibliotecas de gráficos e jogos são construídas sobre ele todos esses recursos dependem de javascript portanto um bom domínio do html dom ajuda a aproveitar ao máximo o canvas acessibilidade a saída do canvas é apenas pixels leitores de tela e outras tecnologias assistivas não conseguem ver o que foi desenhado torne o conteúdo do canvas acessível forneça conteúdo alternativo significativo entre as tags tudo dentro de canvas canvas é exibido para navegadores sem suporte a canvas e exposto à tecnologia assistiva portanto descreva o desenho em vez de escrever uma mensagem genérica de sem suporte para um desenho estático adicione role img e um aria label ou aria labelledby descrevendo o por exemplo canvas role img aria label bar chart of 2024 sales para canvas interativos espelhe os controles e o estado em elementos reais do dom botões regiões dinâmicas pois as formas desenhadas em si não são focalizáveis nem legíveis atributos atributo valor descrição height pixels define a altura do elemento em pixels width pixels define a largura do elemento em pixels a tag canvas suporta atributos globais e os atributos de evento prática prática qual método retorna o objeto no qual você chama comandos de desenho como fillrect e stroke qual método retorna o objeto no qual você chama comandos de desenho como fillrect e stroke canvas getcontext 2d retorna o contexto de renderização 2d canvas getdrawing retorna a superfície de desenho canvas draw 2d retorna o contexto de renderização document createcontext canvas retorna o contexto verificar prática você desenha em um canvas de 300x150 mas define seu tamanho como 600px com css o que acontece você desenha em um canvas de 300x150 mas define seu tamanho como 600px com css o que acontece o navegador estica o bitmap de 300x150 para 600px tornando o desenho borrado ou distorcido o buffer de desenho cresce automaticamente para 600px e permanece nítido o canvas ignora completamente o dimensionamento por css o espaço extra fica transparente e o desenho mantém seu tamanho original verificar was this page helpful yes no previous button next caption on this page canvas vs svg qual usar dimensionamento os atributos width height versus css sintaxe casos de uso comuns acessibilidade atributos prática w3docs tutoriais exemplos exercícios snippets e quizzes gratuitos para a web desde 2014 livros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python prática exercícios quizzes editor try it ferramentas html editor password generator html encoder code diff json beautifier empresa sobre contato política de privacidade idioma english deutsch русский français español português italiano 2026 w3docs todos os direitos reservados feito para desenvolvedores