Why is the image not being added to the canvas?

T

theEternalStudent2016-07-26 17:29:48

JavaScript

theEternalStudent, 2016-07-26 17:29:48

Why is the image not being added to the canvas?
Here is the code:

<!DOCTYPE html>
<html>
<head>
  <title>canvas</title>
  <meta charset="utf-8">
</head>
<body>
  <canvas id='draw' width='570' height='330' style='border:1px solid'></canvas> 
  <script>
    var canvas=document.getElementById("draw")
    var x=canvas.getContext("2d");

    var img = new Image();
    img.src = '/home/sergei/www/canvas/12.png';
    
    x.drawImage(img,10,10);
  </script> 
</body>
</html>

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

T

theEternalStudent, 2016-07-28
@theEternalStudent

Add images to canvas via js

M

Myateznik, 2016-07-26
@Myateznik

It doesn't work in your case due to security reasons built into browsers, it requires a server to work.

D

Dmitry Belyaev, 2016-07-26
@bingo347

The picture has not loaded yet, and you are already trying to draw it
Alexey Yarkov wrote the correct version of the code in one of the comments