How to Add Image to Canvas

How to add image to canvas

You need to wait until the image is loaded before you draw it. Try this instead:

var canvas = document.getElementById('viewport'),
context = canvas.getContext('2d');

make_base();

function make_base()
{
  base_image = new Image();
  base_image.src = 'img/base.png';
  base_image.onload = function(){
    context.drawImage(base_image, 0, 0);
  }
}

i.e. draw the image in the onload callback of the image.

How to insert an image in a canvas item?

try:
    import tkinter as tk
    from tkinter.constants import *
except ImportError:  # Python 2.x
    import Tkinter as tk
    from Tkconstants import *

# Create the canvas, size in pixels.
canvas = tk.Canvas(width=300, height=200, bg='black')

# Pack the canvas into the Frame.
canvas.pack(expand=YES, fill=BOTH)

# Load the .gif image file.
gif1 = tk.PhotoImage(file='small_globe.gif')

# Put gif image on canvas.
# Pic's upper-left corner (NW) on the canvas is at x=50 y=10.
canvas.create_image(50, 10, image=gif1, anchor=NW)

# Run it...
tk.mainloop()

importing image on canvas html5

Take a look here:

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images

It's important to have drawImage call after the image has loaded:

var img = new Image();
img.onload = function() {
    var ctx = document.getElementById('ctx').getContext('2d');
    ctx.drawImage(img, 0, 0);
}
img.src = 'images/backdrop.jpg';

Also, note that you probably want to use images/backdrop.jpg instead of /images/backdrop.jpg (note there's no slash in front), as using the latter would get the image from root directory, I would assume that's probably not where your images are.

As far as loading from a dialog box, you can replace the last line from the above with something like this:

var name = prompt("Enter the name of the file", "backdrop.jpg");
img.src = 'images/' + name;

This way, the user would be able to enter the name of the image file to load it. Of course, you need to have that file in your images folder.

Hope this helps.

Add Image to canvas through Jquery

Try

$(document).ready(function() {  $('.design').each(function() {    var design = $(this).attr('data-design');    var id = $(this).attr('id');    var canvas = $(this).find("canvas")[0];    var ctx = canvas.getContext("2d");    var img = new Image;    img.onload = function() {      ctx.drawImage(this, 0, 0);    };    img.src = design;  });});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div class="design" id="image" data-design="http://lorempixel.com/technics/200/200/">  <canvas width="200" height="200"></canvas>  <p class="name">name</p>  <p class="asset">asset</p></div>

Add image to canvas

You need to modify the create() method of Star constructor, because this is exactly the one that's being called when the canvas redraws everything (as a part of calling createStars() method inside the loop).

There is, however, one thing about context.drawImage(...) that you should be aware of: it needs image to be present in the DOM in order to render it in canvas, so first you would have to do something like

var img = new Image;
img.src = 'https://sourceofyourimage/image.jpg';

and then in create() method you can call context.drawImage(...) passing image, coordinates and size (if you want to).

https://codepen.io/Alvvi/pen/RZroPW here is a working CodePen

Also, you may want to check, if the image is loaded before trying to paint it, I suggest using onload for that, however in my case it works fine without it, because the image is quite small.

How to add image to fabric canvas?

I have done a jsfiddle that loads a jpg image on the canvas, by using the
fabric.Image.fromURL() function and the 'mouse:down' event. Inside the mouse:down i check if the user clicks on an object or just on the canvas.

here is a snippet of the javascript:

var canvas = new fabric.Canvas('c');
canvas.backgroundColor = 'yellow';

fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(myImg) {
 //i create an extra var for to change some image properties
 var img1 = myImg.set({ left: 0, top: 0 ,width:150,height:150});
 canvas.add(img1); 
});

canvas.on('mouse:down',function(event){
  if(canvas.getActiveObject()){
    alert(event.target);
  }

})

but my example also works ok ,if i dont use the extra variable:

fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(myImg) {
 canvas.add(myImg); 
});

if you need more fabric events you can take a look here : http://fabricjs.com/events/

jsfiddle : https://jsfiddle.net/tornado1979/5nrmwtxu/

Hope helps , good luck.

Insert an img tag into Canvas element

The canvas drawImage method will accept an html img element as an image source, so you can directly do this:

ctx.drawImage(document.getElementById('picture'),0,0);

Example code and a Demo:

window.onload=function(){    var canvas=document.getElementById("canvas");    var ctx=canvas.getContext("2d");    ctx.drawImage(document.getElementById('picture'),0,0);}

body{ background-color: ivory; }#canvas{border:1px solid red; margin:0 auto; }

<canvas id="canvas" width=300 height=300></canvas><!-- src is for this demo. You can still use your <%...%> --><img src='https://dl.dropboxusercontent.com/u/139992952/multple/sun.png' id='picture' style='max-height:100%'>

Add image from user computer to canvas with style

You would have to set stroke and strokeWidth property for the image object to accomplish that ...

var canvas = new fabric.Canvas('canvas');document.getElementById('file').addEventListener("change", function (e) {    var file = e.target.files[0];    var reader = new FileReader();    reader.onload = function (f) {        var data = f.target.result;        fabric.Image.fromURL(data, function (img) {            var oImg = img.set({                left: 40,                top: 40,                angle: 00,                width: 100,                height: 100,                stroke: '#07C', //<-- set this                strokeWidth: 5  //<-- set this            }).scale(0.9);            canvas.add(oImg).renderAll();            var a = canvas.setActiveObject(oImg);            var dataURL = canvas.toDataURL({                format: 'png',                quality: 0.8            });        });    };    reader.readAsDataURL(file);});

canvas {border: 1px solid black;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script><input type="file" id="file"><br /><canvas id="canvas" width="180" height="180"></canvas>

Add image to HTML5 Canvas from a file

imageObj.src should be a relative path. For example to an image in the same path, if would be something like imageObj.src = 'image1.jpg';
Path is relative to the html file that is running.

How to Add Image to Canvas