Articles of canvas

Firefox: canvas.toDataURL en image.onload pero devuelve una imagen transparente

Sé que la imagen debe estar completa, su carga finalizada antes de usar la función toDataURL en el canvas, poner el código en la función image.onload lo garantiza. También he probado {preserveDrawingBuffer: true} en canvas.getContext. Esto no funciona en Firefox pero funciona en Chrome … Mi código : var imageWidth = imageHeight = 45; var […]

¿Se desvanecen las líneas después de dibujar canvas?

Ok, estoy dibujando líneas de trazo en un objeto de canvas que está funcionando bien. Lo que me gustaría hacer es eliminar las líneas o desvanecerlas después de un tiempo determinado. He estado leyendo sobre cómo guardar el estado y actualizar, pero puedo ‘ Parece que funcionó. También he intentado almacenar el contexto del canvas […]

generar svg sin la etiqueta foreignObject

Estoy usando el complemento dom-to-image.js . El problema es que genera una etiqueta que contamina el canvas. Aquí está la parte que genera el svg. function makeSvgDataUri(node, width, height) { return Promise.resolve(node) .then(function (node) { node.setAttribute(‘xmlns’, ‘http://www.w3.org/1999/xhtml’); return new XMLSerializer().serializeToString(node); }) .then(util.escapeXhtml) .then(function (xhtml) { return ” + xhtml + ”; }) .then(function (xhtml) { […]

drawImage no funciona cuando me refiero a una imagen en otro archivo javascript

(Mostraré el javascript puro a continuación) Tengo estas dos líneas de código que, en mi opinión, están haciendo exactamente lo mismo, pero una de ellas informa un error. Esto aparece en un archivo llamado “Rendering.coffee”. Aquí están las dos líneas (en coffeescript): … ctx.drawImage(document.getElementById(“bg”), 0, 0) #this works ctx.drawImage(root.resources.bg, 0, 0) #TypeError: Value could not […]

Clasificación isométrica simple con xdim y ydim

Tengo un sistema de clasificación isométrica simple con esta función (el código está en Typescript / Javascript ): public Sort(a: PIXI.Sprite, b: PIXI.Sprite) { return ((a.IsoZ – b.IsoZ) == 0 ? (a.TileZ – b.TileZ == 0 ? (a.Tile2Z ? (a.Tile2Z b.Tile2Z ? 1 : 0)) : 0) : a.TileZ – b.TileZ) : (a.IsoZ – b.IsoZ)); […]

Hacer un canvas infinito

Actualmente estoy usando un canvas en el que dibujé algunas áreas de interés. Consisten en cuadrados y se pueden mover con un clic del mouse (es decir, un área seleccionada se centrará en la posición de mi cursor cada vez que haga clic en el canvas). Mi problema actual es que me gustaría agregar la […]

canvas virtual putimagedata no funciona

Soy nuevo en el concepto de canvas virtual, ¿alguna idea de por qué el siguiente código no funciona? $(document).ready(function () { var c1 = document.createElement(‘canvas’); var ctx1 = c1.getContext(“2d”); var c2 = document.getElementById(‘Canvas2’); var ctx2 = c2.getContext(“2d”); c1.width = c2.width; c1.height = c2.height; img1 = new Image(); img1.src = ‘A1.png’; img1.onload = function () { […]

Simplemente canvas de animación

Tengo una animación de canvas simple: dos rectangularjs se mueven en dos direcciones diferentes. Sin embargo, siento que esto podría simplificarse más. http://jsfiddle.net/tmyie/R5wx8/6/ var canvas = document.getElementById(‘canvas’), c = canvas.getContext(‘2d’), x = 10, y = 15, a = 20, b = 50; function move() { c.clearRect(0, 0, 500, 300); c.fillRect(0, y, 5, 5), c.fillRect(b, 5, […]

Cómo obtener la posición del mouse en el canvas HTML5 transformado

Estoy tratando de obtener la posición del ratón en un canvas transformado. Aquí está mi método de cambio de tamaño: window.addEventListener(‘resize’, resize); function resize() { screenWidth = window.innerWidth; screenHeight = window.innerHeight; scaleFillNative = MathMAX(screenWidth / maxScreenWidth, screenHeight / maxScreenHeight); mainCanvas.width = screenWidth; mainCanvas.height = screenHeight; mainContext.setTransform(scaleFillNative, 0, 0, scaleFillNative, Math.floor((screenWidth – (maxScreenWidth * scaleFillNative)) / […]

Guardar imagen en dropbox con datos de canvas

Estoy tratando de escribir datos de canvas como una imagen (png) en mi dropbox. Me las arreglo para obtener los datos del canvas y guardar un archivo en Dropbox, pero el archivo no es un archivo de imagen que se cose. De acuerdo con la documentación, los datos de la imagen deben convertirse en un […]