Introducción

La pregunta se refiere a un escenario en el que tiene un canvas y el usuario puede cambiar su contenido. Supongo que esto funciona y debe poder guardar el contenido del canvas como una imagen y cargar esa imagen guardada y dibujar en el canvas la imagen dada.

Exportando el contenido

 var canvas = document.getElementById("mycanvas"); //you can change this to your image var img = canvas.toDataURL("image/png");

Guardando la imagen

Una vez que haya creado con éxito la variable img , puede guardarla. Puede almacenarlo en localStorage , como

 localStorage.setItem('saved', img)

También puede almacenarlo de manera diferente, como enviar la imagen a su servidor en una solicitud POST, pero, para el propósito de esta pregunta, mi objetivo es tener una solución simple que funcione. Sería otra tarea almacenar esto como un archivo o algo similar en su servidor.

Cargando la imagen

 let img = document.createElement('img'); img.src = localStorage.getItem('saved');

Es posible que img aún no se haya guardado, como en la primera carga. Deberá manejar adecuadamente ese caso, como

 if (img.src) { //do some stuff }

Poner una imagen en un lienzo

 canvas.getContext('2d').drawImage(img, dx, dy);

Hola, creo una flecha, pero el problema es que la flecha no es perfecta en todas las direcciones ... la flecha de dirección arriba, abajo, derecha e izquierda no es perfecta

aqui esta la imagen

aqui esta mi codigo

 _drawLineMove: function (a) { this._drawShapeMove(a, 1); var b = this.canvasTempLeftOriginal, c = this.canvasTempTopOriginal; //var headlen = 10; // length of head in pixels a.pageX < b && ((ax = ax + aw), (aw = -1 * aw)), a.pageY < c && ((ay = ay + ah), (ah = -1 * ah)), (this.ctxTemp.lineJoin = "round"), this.ctxTemp.beginPath(), console.log(a); const head_len = 16; const head_angle = Math.PI / 6; var dx = (ax + aw) - ax; var dy = (ay + ah) - ay; const angle = Math.atan2(dy, dx); this.ctxTemp.beginPath(); this.ctxTemp.moveTo(ax, ay), //fromx , fromy this.ctxTemp.lineTo(ax + aw, ay + ah), //tox,toy this.ctxTemp.stroke(); this.ctxTemp.beginPath(); this.ctxTemp.lineTo((ax + aw), (ay + ah)); this.ctxTemp.lineTo((ax + aw) - head_len * Math.cos(angle - head_angle), (ay + ah) - head_len * Math.sin(angle - head_angle)); this.ctxTemp.lineTo((ax + aw) - head_len * Math.cos(angle + head_angle), (ay + ah) - head_len * Math.sin(angle + head_angle)); this.ctxTemp.closePath(), this.ctxTemp.stroke(); this.ctxTemp.fill(); },

Gracias