Perguntas com a tag [canvas]

Canvas é um elemento da HTML5 destinado a delimitar uma área para renderização dinâmica de gráficos. Todo o trabalho de criação e animação é realizado atráves de linguagens de programação dinâmica, por exemplo JavaScript.

Filtrar por
Ordenado por
Com tags
1 voto
2 respostas
63 visitas

Quando tento fazer um canvas não da erro mas tambem nao faz nada

Gostava de saber o que estou a fazer de errado aqui... <script type="text/javascript"> function draw() { if (!Modernizr.canvas) return; { var canvas = document.getElementById(...
Não sei's user avatar
1 voto
1 resposta
146 visitas

Chartjs rotacionar texto

Gostaria de saber, tenho um texto criado com canvas no chartJS]. Como faço para rotacionar o texto, o mesmo ficando na vertical no centro da linha. Tentei com Rotate, mas desapareceu do gráfico o ...
abcd's user avatar
  • 1.269
10 votos
1 resposta
1mil visitas

Cálculos utilizados para rotacionar uma imagem no canvas

Eu tenho o seguinte código abaixo para poder rotacionar uma imagem através do canvas. function qs(selector) { return document.querySelector(selector); } ...
Wallace Vizerra's user avatar
1 voto
0 respostas
151 visitas

Gerar um PDF de um Gráfico Morris

Estou desenvolvendo uma aplicação que gera um relatório usando os gráficos Morris (https://startbootstrap.com/template-overviews/sb-admin-2/) Os gráficos estão funcionando corretamente, agora preciso ...
Evandro Silva's user avatar
8 votos
1 resposta
8mil visitas

Escrever na tela Javascript

Preciso fazer uma área no form que o usuário assine digitalmente com uma caneta para tela de touch para armazenar a assinatura do mesmo. Como se o mesmo estivesse escrevendo em um papel mas na tela. ...
Ezequiel Tavares's user avatar
0 votos
1 resposta
345 visitas

Java - Canvas fica piscando ao redesenhar a tela

Estou fazendo uma aplicação gráfica com a classe Component, mas sempre que eu apago a tela para desenhar um novo quadro, o Canvas pisca! A função clearBackground: public void clearBackground() { ...
Taarak's user avatar
  • 1
2 votos
1 resposta
190 visitas

canvas - Preencher um semi sorriso com a cor vermelha

Boa noite galera, é o seguinte, preciso preencher o sorriso do Snowman de vermelho. Mas não estou conseguindo, não sei se é porque estou algum erro no código ou se estou desenhando o sorriso errado. O ...
Anderson Trugilio's user avatar
2 votos
1 resposta
904 visitas

Como criar um Gif com o conteudo do Canvas

Gostaria de saber como criar um gif a partir de um canvas, nesse meu canvas eu tenho uma seguencia de cenas, depois das cenas serem criadas queria ler todas as cenas e depois salvar elas como um .gif
Jimmy K.'s user avatar
1 voto
0 respostas
441 visitas

Efeito canvas responsivo

Possuo uma página web responsiva em que possuo um efeito de luzes usando o canvas. Acontece que o efeito deve permanecer apenas sobre a área do banner, fiz aqui um método usando o margin-top negativo, ...
André Rabello's user avatar
6 votos
2 respostas
829 visitas

Canvas apagar texto correto

Eu ando em pesquisas e não há maneira de fazer isto trabalhar, a primeira tentativa funciona bem, mas a segunda já não, ou seja, não apaga o texto que lá estava e o substitui pelo novo (no campo ...
Miguel's user avatar
  • 29,4mil
3 votos
0 respostas
100 visitas

Xamarin Android - Criar uma linha por onde o dedo passar

Olá, gostaria de criar uma reta ou retangulo, por onde meu dedo passar. Na verdade não precisa ser exatamente por onde passar, mas em cima de cada button que eu passar o dedo ele vai aumentando o ...
Leonardo Froio Inácio's user avatar
3 votos
1 resposta
208 visitas

Como colocar a mesma animação em dois canvas ao mesmo tempo?

Tenho uma animação em "html5 Canvas" (usando Flot Real Time) e agora preciso que ela seja clonada em tempo real para um novo canvas, ou seja, desenhar a mesma coisa em 2 canvas ao mesmo tempo. Então ...
Camila Yamamoto's user avatar
1 voto
1 resposta
410 visitas

Como usar transicoes de "tempo" em uma animacao Canvas

Dando sequencia ao post "Como gerar uma curva Seno", onde fiz alguns ajustes: Ainda estou trabalhando neste simulador de ECG (eletrocardiograma), e agora preciso "manipular" os tempos dentro do ...
Camila Yamamoto's user avatar
1 voto
0 respostas
287 visitas

Como linkar imagem no canvas com um objeto

Tenho a seguinte classe: class Sapo { private Image imgSapo; public int IdSapo { get; } public Sapo(int id) { imgSapo = new Image(); IdSapo = id; } public ...
Mathi901's user avatar
  • 1.315
4 votos
0 respostas
1mil visitas

Resolução de Imagem criada com canvas

Boa tarde a todos! Estou desenvolvendo uma aplicação que faz a digitalização de uma ficha com várias digitais, onde é possível o usuário efetuar cortes nessas digitais e depois salvá-las no banco de ...
William Marques's user avatar
0 votos
1 resposta
154 visitas

Eventos de mouse responsivos com canvas?

Tenho o seguinte código: var block = false; var context; var drawing; var rect; $(function() { context = $('#canvas')[0].getContext('2d'); drawing = false; rect = $('#canvas')...
Leonardo's user avatar
  • 9.360
2 votos
1 resposta
242 visitas

Canvas - desenhar imagem repetida

Como posso desenhar uma imagem a repetindo até preencher uma área? Algo como o efeito da propriedade CSS background-repeat. Onde a imagem é repetida até preencher toda a área da tag.
Silva97's user avatar
  • 554
0 votos
0 respostas
92 visitas

Remover os espaços da div com imagem usando Canvas

Tenho uma div, onde estou salvando o conteúdo usando canvas <div class="container-capa"> <img src=~/Content/imagemcartaovisita/@Session["NomeCapaCartao"] class="img-responsive" id="capa" ...
Harry's user avatar
  • 3.793
0 votos
0 respostas
440 visitas

Como trazer uma pagina com gráfico dentro de um div em outra pagina usando ajax?

Estou com um problema, tenho uma função simples em Ajax que trás uma página dentro de uma div, fiz o teste funcionar, porem quando faço para trazer uma página que tenha gráfico não trás nada, Alguém ...
vicent marteza's user avatar
0 votos
2 respostas
378 visitas

Dar Foreach em label no Chartjs / Canvas - CodeIgniter

Estou com um problema aqui, que pode ser até simples, não sei Estou usando um frame pra gráfico, onde eu posso colocar as labels que eu quero para então ela ser exibida a cada barra. Ficando assim: ...
Override_GER's user avatar
3 votos
1 resposta
341 visitas

Como Colocar Imagem no Eixo X

Estou tentando colocar uma imagem nesse gráfico que represente as Labels, mas como é um canvas não sei como fazer isso no ChartJs. JS myBarChart = new Chart(chartBar, { type: 'bar', data: { ...
Diego Souza's user avatar
  • 16,7mil
0 votos
1 resposta
178 visitas

Como pegar toDataURL para salvar em uma sessionStorage?

Estou utilizando uma biblioteca que peguei aqui neste link: https://github.com/fengyuanchen/cropper Só que já passei 2 dias testando e procurando como pegar a imagem cortada com toDataURL para pegar ...
Jean Carlos Ferreira Lemes's user avatar
1 voto
1 resposta
61 visitas

Onde colocar rotate Canvas neste codigo

Procurei muito, mais infelizmente não encontrei onde a função rotate do canvas eu conseguiria adicionar neste código. No html tenho um input type ranger que utilizo para girar a imagem.. O input type ...
Jean Carlos Ferreira Lemes's user avatar
3 votos
2 respostas
1mil visitas

Como copiar um canvas para uma imagem

Tenho me debatido pra resolver essa questão, que parece simples, mas não estou conseguindo, Talvez eu não esteja sabendo fazer a pergunta, então conto com a boa vontade dos amigos: 1. Tenho o ...
Roberval Sena 山本's user avatar
1 voto
2 respostas
1mil visitas

Gráfico com Canvas

Estou precisando desenvolver o seguinte gráfico utilizando canvas: Porém por enquanto so consegui desenhar as retas em preto representando o x,y. Alguém poderia dar uma ajuda? Segue código feito. 1-...
Julio César's user avatar
1 voto
0 respostas
54 visitas

EDGE não consegue copiar imagens grandes usando JS de/para um canvas?

Tenho o seguinte código, que copia pedaços da imagem "smoothchartshowAnalisysCopy" (500px X 250px) para a imagem maior (32172px X 250px). var c = document.getElementById('analysisFullGraph1'); ...
Roberval Sena 山本's user avatar
0 votos
1 resposta
2mil visitas

Div para canvas

Olá, estou tendo um problema ao transformar uma div em canvas, pois dentro dessa div tem uma img, e o src contem a url COMPLETA da imagem, com http, quando é uma imagem normal que ja esta no servidor ...
Pablo Schuab's user avatar
0 votos
0 respostas
678 visitas

Canvas Draw TBitmap Multiplas Imagens

Gostaria de capturar várias imagens e "juntar" todas elas em uma só sem ter que as salvar primeiro, eu capturo 6 imagens coloco uma por cima da outra de acordo com a posição na tela e salvo em uma ...
Jean Coelho's user avatar
3 votos
2 respostas
2mil visitas

Adicionar uma figura bmp ou jpg em um canvas no Delphi

É possível eu inserir, via programação, uma imagem jpg ou bmp em um canvas? Estou usando o canvas em um TBitmap em tempo de programação, pois minha aplicação não possui tela. Ela é chamada, cria o ...
Rodrigo Tognin's user avatar
0 votos
1 resposta
503 visitas

Manipular uma imagem antes de adiciona-la em um elemento canvas

Estou adicionando uma imagem dinamicamente em um canvas, porem não estou conseguindo redimensiona-la corretamente. var img = new Image(); img.src = "https://i.stack.imgur.com/lIaBN.jpg"; ...
MarceloBoni's user avatar
  • 6.436
0 votos
3 respostas
1mil visitas

Rotacionar Canvas no Delphi

Eu preciso rotacionar um objeto dentro de um canvas no Delphi. Exemplo rotacionar em 90 graus. Texto eu consigo é fácil, mas tenho que poder fazer para qualquer tipo objeto desenhado. Como para ...
Anderson Souza's user avatar
5 votos
1 resposta
52 visitas

Montando uma arena em canvas

Estou montando uma arena utilizando recursos de HTML/JS com o canvas. Tenho o seguinte código: function montarArena() { var canvas; var heightCanvas = 498; var widthCanvas = 598; ...
MarceloBoni's user avatar
  • 6.436
1 voto
0 respostas
74 visitas

Problema com tamanho minimo em gráfico chartj

var config = { type: 'radar', data: { labels: ["Confiança", "Atividade", "Juros", "Condições de financiamento", "Concessões reais", "Atratividade do Financiamento Imobiliário", "...
Jonas Cruvinel's user avatar
2 votos
0 respostas
349 visitas

Montar uma regua em javascript com array

Preciso montar uma régua igual ao desenho. Estou tendo dificuldades para encontrar uma lógica então gostaria de uma ajuda. Cenário: Existe dois arrays (um com os dados de temperatura e outro com ...
Edson Fuchs's user avatar
1 voto
1 resposta
108 visitas

ChartJS 2.0 Rotation

Como eu posso rotacionar o texto? O que eu tenho: Estou tentado rotacionar mas o ctx.translate não funciona direito, vejam: Esse é meu código: animation: { onComplete: ...
Felipe Auler's user avatar
3 votos
2 respostas
464 visitas

Triângulo Delphi - Canvas

Quero desenhar um triângulo no Delphi por meio do Canvas. Esse ponteiro servirá como um ponteiro de um Gauge (Speedometer) como neste exemplo: Utilizo o TPoint() para definir onde o ponteiro ...
Andrey's user avatar
  • 1.572
0 votos
0 respostas
256 visitas

Upload de imagens aumentando quase 10x o tamanho do arquivo

Boa tarde queridos programadores benfeitores. Estou com um problema, como descrevi no título, que está afetando meus uploads de imagens. A imagem aumenta até 10 vezes o tamanho. E não estou falando em ...
Andrew Ribeiro's user avatar
9 votos
1 resposta
2mil visitas

Movimentar sprite do personagem no canvas e mudar imagem [fechada]

Bom, gostaria de saber como eu poderia implementar uma sprite no meu canvas, sou muito leigo com canvas, a ideia é, ao apertar seta -> ele execute a sprite 1.png, ao aperta seta <- ele execute a ...
Wladi Veras's user avatar
1 voto
0 respostas
96 visitas

Uma transição afeta a opacidade da outra redefinindo 'globalAlpha' no canvas

Eu estou fazendo um jogo e atualmente estou construindo uma tela onde teria uma transição de opacidade (fade in) e, após ser finalizada, iniciaria outra transição de opacidade. O problema é quando a ...
user avatar
1 voto
0 respostas
27 visitas

como faço para funcionar a função exportEnable no canvas js no internet explorer?

tenho esse código abaixo que me mostra um gráfico porém no IE não funciona a função exportEnable e nem animationEnabled no chrome funciona porém quando eu chamo a pagina no modal a altura da tela fica ...
orlando silva's user avatar
-1 votos
2 respostas
1mil visitas

Como fazer upload de imagem canvas

Eu recebo o resultado de uma imagem através dessa função this.canvas.toDataURL('png'), essa função gera a imagem normalmente, os pontos são: Como fazer o upload disso para o servidor PHP usando ...
Vinícius Lara's user avatar
0 votos
1 resposta
69 visitas

Como fazer para canvas toDataURL funcionar em imagens em outro servidor?

Tenho um app do facebook onde pego a imagem do perfil do usuário. Como fazer para colar esta imagem sobre outra fazendo uma montagem para ser depois compartilhada no proprio fb. O método toDataURL do ...
Fabio Ferreira's user avatar
0 votos
0 respostas
297 visitas

Como criar efeito hover com duas canvas sobrepostas com efeitos contrários?

Código Anterior. *Segue a baixo o exemplo do código: JSFiddle Antigo Novo código para quem quiser! JSFiddle Novo
Wagner Viana's user avatar
1 voto
1 resposta
98 visitas

mouse hover Javascript

Consegui fazer com jquery, está ai o código para quem precisar. <script type="text/javascript" src="dist/jquery/jquery-1.12.3.min.js"></script> <canvas id="diamond" width="100" ...
Wagner Viana's user avatar
3 votos
2 respostas
821 visitas

Criar uma animação em canvas sobre vídeo

Estou fazendo uma pequena aplicação web onde preciso, a partir de algumas coordenadas fazer uma caixa (retângulo) se mover frame a frame. Em meu código já consegui extrair o frame atual do vídeo porém ...
Pedro Frattezi Silva's user avatar
3 votos
2 respostas
1mil visitas

Converter Html em Canvas

É possível converter uma página html em canvas? Por exemplo, tenho uma página contruída em html5 e queria que essa página fosse toda "minificada" para apenas uma tag ? Não quero que a página html ...
David Damasceno's user avatar
3 votos
1 resposta
535 visitas

Forçar aparecer extensão ao fazer download via javascript

Tenho essa tela, de redimensionamento de imagem: quando clico em download, aparece essa tela pra salvar o arquivo, mas como podem ver, o arquivo aparece sem a extensão, como posso fazer pra o ...
alexandre9865's user avatar
3 votos
1 resposta
231 visitas

Imagem perde efeito do CamanJS ao manipular canvas

Possuo um canvas, no qual manipulo imagens desenhadas nele com o plugin CamanJS e funciona perfeitamente. Porém, se eu manipulo o canvas manualmente (sem o auxílio do plugin) a imagem perde o efeito. ...
Igor's user avatar
  • 1.247
1 voto
1 resposta
119 visitas

Manipulação de imagem do lado cliente

Surgiu um desafio, preciso saber como/quais ferramentas pode me auxiliar a criar uma area que posso manipular imagem do lado do cliente. Preciso desenvolver um site que cria camisas personalizadas, ...
Skywalker's user avatar
  • 3.166
4 votos
1 resposta
1mil visitas

Construtor de botoes em JavaScript canvas

Estou com uma dúvida ao criar um construtor de botões para Canvas no JS, eu já consigo detectar o clique na área do botão, mas gostaria de simplificar o código com um construtor, para agilizar meu ...
Joao Scheuermann's user avatar