How can I open an image from my computer and move it inside my canvas on a web page?


I am trying to open an image from my pc to show it on my canvas that I create on my website, but I can not find an example that can guide me to do this, I really do not know if I can if someone can help me please. Here I leave part of the code that I implement. I hope you have given me to understand and thank you.

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns=""><head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" /><title>La web</title>

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

<body background="fondo.gif">
<div id="container">   <!-- Start of Page Header -->
<div id="page_header">
<div id="page_heading">

<div class="clearthis">&nbsp;</div>
<h1 align="center">La web</h1>

<!-- End of Page Header --><!-- Start of Page Menu -->
<div id="page_menu">
<li><a href="/home/jun/Escritorio">Abrir imagen</a></li>
<!--<input type="button" value="Abrir Imagen " onclick="borraCnv2Width()" />-->

<li><a href="">Información</a></li>
<li><a href=""</a></li>
<li><a href=""> </a></li>
<li><a href=""> </a></li>
<li class="last"><a href=""> </a></li>

<!-- comienza el canvaz generado para mostrar la imagen-->

function animacion_con_canvas()
     var mi_canvas=document.getElementById("canvas");

     var contexto=mi_canvas.getContext("2d")

     var img_re=new Imagen();


     img_re.addEventListener('load',mostrar_imagen, false);

     function mostrar_imagen()

<canvas id="canvas" width="450" height="260" style="border:3px solid #ccc;"></canvas>  <!-- canvas generado -->
    <td>  </td>
    <td><img src="images/examen.jpg" width="250px" height="250px"/></td>
    <p align="left">
    <strong>MÁS INFO</strong>
   <big>INFOOOOO </big>
<div  id="copyright"> <strong>Copyright&copy; 2018 Todos los derechos reservados</strong></div>
asked by Airam 23.11.2018 в 05:54

1 answer


A simpler way to draw an image on a canvas:

function drawImage() {
  var ctx = document.getElementById('canvas').getContext("2d"),
    img = new Image();

  img.onload = function() {
    ctx.drawImage(img, 0, 0, 500, 500);
  img.src = "";

<canvas id="canvas" width="500" height="500"></canvas>

Updating the answer to what you need using readAsDataURL should look like this:

var imageLoader = document.getElementById('imageLoader');
    imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

function handleImage(e){
    var reader = new FileReader();
    reader.onload = function(event){
        var img = new Image();
        img.onload = function(){
            canvas.width = img.width;
            canvas.height = img.height;
        img.src =;
<input type="file" id="imageLoader" name="imageLoader"/>
<canvas id="canvas"></canvas>

The readAsDataURL method is used to read the content of Blob or File specified. When the reading operation is completed, the readyState becomes DONE , and the loadend is released.


At that time, the result attribute contains the information as a URL representing the information in the file as a string of characters encoded in base64 .

answered by 28.11.2018 / 15:54