I am able to get the image behind the drawing canvas but when i start drawing on the canvas the image dissapear
var $ = function(id){return document.getElementById(id)};
var canvas = this.__canvas = new fabric.Canvas('c', {
isDrawingMode: true
});
ctx = canvas.getContext("2d");
var background = new Image();
background.src = "images/pic01.jpg";
// Make sure the image is loaded first otherwise nothing will draw.
background.onload = function(){
ctx.drawImage(background,0,0);
}
That is not how you draw images using fabric.
Here is the correct way using fabric.Image.fromURL
var canvas = new fabric.Canvas('c', { isDrawingMode: true });
fabric.Image.fromURL('http://i.stack.imgur.com/UFBxY.png', function(myImg) {
canvas.add(myImg);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.4/fabric.min.js"></script>
<canvas id="c" width="300" height="300"></canvas>
Related
I am new to Paper.js, I am creating a simple drawing tool using paper.js and download the canvas with the background image. I'm trying filesaver.js and blob however, I'm stuck downloading the canvas with a raster image as background.
Any help or suggestions would be highly appreciated.
I tried:
'''
HTML:
//button to download
<button href="#" class="btn btn-primary" id="save-canvas"
onclick="exportPNG()">Save</button>
//canvas
<canvas class="canvas" resize id="canvas"></canvas>
//image
<img src="image/image.jpg" id="image">
JS:
function exportPNG() {
var canvas = document.getElementById('canvas');
canvas.toBlob(function (blob) {
saveAs(blob, 'paper.png');
});
}
// Setup Paper
paper.setup(document.querySelector('canvas'));
//Image Layer
var imageLayer = new Layer({insert: false});
var image = new Raster('image');
image.position = view.center;
project.layers.push(imageLayer);
imageLayer.addChild(image);
imageLayer.activate();
'''
If I understand your request, you can do this quite simply.
There are some gotchas though like the fact that you need to wait for the image to be loaded and for the scene to be drawn before exporting the canvas content as image...
Here is a sketch demonstrating one way of doing it.
// Create a raster that will be used as background.
const raster = new Raster({
crossOrigin: 'anonymous',
source: 'http://assets.paperjs.org/images/marilyn.jpg',
position: view.center
});
// Wait for the raster to be loaded...
raster.onLoad = () => {
// ...and center it.
raster.position = view.center;
// Draw a circle over it.
new Path.Circle({
center: view.center,
radius: 50,
fillColor: 'blue'
});
// Make sure that the scene is drawn on the canvas.
view.update();
// Create a blob from the canvas...
view.element.toBlob((blob) => {
// ...and get it as a URL.
const url = URL.createObjectURL(blob);
// Open it in a new tab.
window.open(url, '_blank');
});
};
My friend and I are trying to add images to a canvas using JavaScript; however we have no clue how to even do that and we've tried every possible string of code involving drawing images (such as ones from google, etc), all with failure and we don't even know which direction is the right one to take at this point. Can anyone help? Thanks!
Here's a basic example of what you're seeking.
document.getElementById('inp').onchange = function(e) {
var img = new Image();
img.onload = draw;
img.onerror = failed;
img.src = URL.createObjectURL(this.files[0]);
};
function draw() {
var canvas = document.getElementById('canvas');
canvas.width = this.width;
canvas.height = this.height;
var ctx = canvas.getContext('2d');
ctx.drawImage(this, 0,0);
}
function failed() {
console.error("The provided file couldn't be loaded as an Image media");
}
<input type="file" id="inp">
<canvas id="canvas"></canvas>
I have a three.js scene. There are some objects including a watermark object. I need to take a scene snapshot but it should not include the watermark object. But at the same time a user should not see the scene without watermark on his screen so he could not take a screenshot.
Is it possible and how?
Thank you!
HERE is a fiddle that shows how to take a screenshot.
HERE is a version that hides the mesh before the screenshot is taken.
Original function.
function takeScreenshot() {
var w = window.open('', '');
w.document.title = "Screenshot";
var img = new Image();
img.src = renderer.domElement.toDataURL();
w.document.body.appendChild(img);
}
Altered function to hide mesh.
function takeScreenshot() {
var w = window.open('', '');
w.document.title = "Screenshot";
var img = new Image();
mesh.visible = false;
renderer.render(scene, camera);
img.src = renderer.domElement.toDataURL();
mesh.visible = true;
w.document.body.appendChild(img);
}
I just set the mesh to visible = false, render the scene to take the screenshot, then set mesh.visible back to true.
I am experimenting with Famo.us framework. Can Surface have image as background? How can i set that. I have tried wth:
// your app here
var bg = new Surface({
properties: {
backgroundImage: "url(images/background.png')"
}
});
You need to set the size of the surface. You can also additionally set the size of the backgroundImage with backgroundSize.. Here is what I did.. Hope it helps!
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Modifier = require('famous/core/Modifier');
var context = Engine.createContext();
var surface = new Surface({
size:[200,200],
properties:{
backgroundImage: 'url(content/images/famous_symbol_transparent.png)',
backgroundSize: '200px 200px',
backgroundRepeat: 'no-repeat'
}
});
context.add(new Modifier({origin:[0.5,0.5]})).add(surface);
I am completely new to HTML5 and have been reading about it for the past few days mainly because I wanted to create a rotating image to put in a <div>. I found a code that does exactly what I want, but it throws the canvas on to the bottom left corner of my page (I'm not sure why, but I think it has something to do with the very first line of the code below). I'm not sure how to adapt the code to a element so that I can put it where I want. From looking at other people's scripts and trying to emulate them, I know you're supposed to do this sort of thing to hold the canvas "<canvas width="100" height="100" id="pageCanvas"></canvas>," but I don't know how to name the below code in order to do that. I greatly appreciate any help anyone can offer me - thank you so much for reading! :)
<script>
window.addEventListener("load", init);
var counter = 0,
logoImage = new Image(),
TO_RADIANS = Math.PI/180;
logoImage.src = 'IMG URL';
var canvas = document.createElement('canvas');
canvas.width = 100;
canvas.height = 100;
var context = canvas.getContext('2d');
document.body.appendChild(canvas);
function init(){
setInterval(loop, 1000/30);
}
function loop() {
context.clearRect(0,0,canvas.width, canvas.height);
drawRotatedImage(logoImage,100,100,counter);
drawRotatedImage(logoImage,300,100,counter+90);
drawRotatedImage(logoImage,500,100,counter+180);
counter+=2;
}
function drawRotatedImage(image, x, y, angle) {
// save the current co-ordinate system
// before we screw with it
context.save();
// move to the middle of where we want to draw our image
context.translate(x, y);
// rotate around that point, converting our
// angle from degrees to radians
context.rotate(angle * TO_RADIANS);
// draw it up and to the left by half the width
// and height of the image
context.drawImage(image, -(image.width/2), -(image.height/2));
// and restore the co-ords to how they were when we began
context.restore();
}
</script>
Create a canvas element in your HTML code so you can place it exactly where you want (with html + css) :
<canvas id='canvas' height='100' width='100'> Your browser does not support HTML5 canvas </canvas>
And replace this javascript code :
var canvas = document.createElement('canvas');
canvas.width = 100;
canvas.height = 100;
var context = canvas.getContext('2d');
document.body.appendChild(canvas);
by this one :
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');