CODEWITHSUNDEEP
javascriptjquery
Umer Fayyaz
Umer Fayyaz

Reputation: 497

How to load image on page load in Canvas

Hi I am using canvas for drawing but issue is this on page load I want to show an image on canvas so the user can continue from where he left

<div id="wPaint" style="position:relative; width:100%; height:600px; background-color:white; border:1px solid black;  resize: both; ">
</div>

canvas is loaded in this div. if I inspect then canvas code is below image

canvas code image

Thanks for any help.

Upvotes: 0

Views: 187

Answers (2)

Umer Fayyaz
Umer Fayyaz

Reputation: 497

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 enter image description here

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

Upvotes: 1

Lajos Arpad
Lajos Arpad

Reputation: 76434

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);

Upvotes: 2

Related Questions