Introduction

The question is referring to a scenario when you have a canvas and the user can change its content. I assume that this works and you need to be able to save the content of the canvas as an image and load that saved image and draw into the canvas the given image.

Exporting the content

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

Saving the image

Once you have successfully created the img variable, you can save it. You can store it into localStorage, like

localStorage.setItem('saved', img)

You can store it differently as well, like sending the image to your server in a POST request, but, for the purpose of this question I aim to have a simple solution that works. It would be another task to store this as a file or something of the like in your server.

Loading the image

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

It is possible that img was not saved yet, like in the first load. You will need to properly handle that case, like

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

Putting an image into a canvas

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

Hi I create arrow but issue is arrow not perfect on all direction... top , down , right and left direction arrow not perfect

here it image

here it is my code

_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 && ((a.x = a.x + a.w), (a.w = -1 * a.w)),
                a.pageY < c && ((a.y = a.y + a.h), (a.h = -1 * a.h)),
                (this.ctxTemp.lineJoin = "round"),
                this.ctxTemp.beginPath(),
                console.log(a);
                  const head_len = 16;
                  const head_angle = Math.PI / 6;
                  var dx = (a.x + a.w) - a.x;
                  var dy = (a.y + a.h) - a.y;
                  const angle = Math.atan2(dy, dx);


                this.ctxTemp.beginPath();
                this.ctxTemp.moveTo(a.x, a.y), //fromx , fromy
                this.ctxTemp.lineTo(a.x + a.w, a.y + a.h), //tox,toy
                this.ctxTemp.stroke();

                this.ctxTemp.beginPath();
                this.ctxTemp.lineTo((a.x + a.w), (a.y + a.h));
                this.ctxTemp.lineTo((a.x + a.w) - head_len * Math.cos(angle - head_angle), (a.y + a.h) - head_len * Math.sin(angle - head_angle));

                this.ctxTemp.lineTo((a.x + a.w) - head_len * Math.cos(angle + head_angle), (a.y + a.h) - head_len * Math.sin(angle + head_angle));
                  this.ctxTemp.closePath(),
                  this.ctxTemp.stroke();
                  this.ctxTemp.fill();

                
        },

thanks