why this doesn't work? i need a solution without appending canvas within 'Can' function.
function Can(canvasId) {
this.canvas = document.createElement('canvas');
this.context = this.canvas.getContext('2d');
this.canvas.width = 200;
this.canvas.height = 200;
this.canvas.id = canvasId;
}
var canvas1 = new Can(document.getElementById('can1');
var canvas2 = new Can(document.getElementById('can2');
FIDDLE
EDIT
i need to wrap both canvases into container and apply constructor function. hope it's more clear now. thanks. FIDDLE
If I understand your question correctly, it looks like you don't even need to use createElement(), because you already have the canvas elements in your html. See if this works for you:
JSFiddle Demo
function Can(canvasId) {
this.canvas = document.getElementById(canvasId);
this.context = this.canvas.getContext('2d');
this.canvas.width = 200;
this.canvas.height = 200;
this.canvas.id = canvasId;
}
var canvas1 = new Can('can1');
var canvas2 = new Can('can2');
This just grabs the reference to the canvas element in the constructor with getElementById().
forgive me if this is ignorant, but at a glance, should 'Can' not be defined as a class?
Related
I started a simple project in javascript a few days ago and found this issue. Every time I reload my google-page i get an empty canvas. I have already tried to take out the drawImage() function out of class and it worked. But what if I need to use that function as a class method? (Also I've already tried passing the canvas as an argument of the draw method but it doesn't work)
So this is working but I don't need it
const canvas = document.getElementById('main_canvas')
const ctx = canvas.getContext('2d')
var img = new Image()
img.src = 'some source'
ctx.drawImage(img,10,10)
And this isn't working but supposed to
const canvas = document.getElementById('main_canvas')
const ctx = canvas.getContext('2d')
class Person
{
constructor(name){
this.name = name
this.img = new Image()
this.img.src = 'some source'
}
draw(){
ctx.drawImage(this.img,10,10)
}
}
var peter = new Person('Peter Griffin')
peter.draw()
The reason is simple. Your image is not loaded when you want to draw it.
You have to wait until the image is loaded before drawing it in the canvas.
const canvas = document.getElementById('main_canvas')
const ctx = canvas.getContext('2d')
class Person
{
constructor(name){
this.name = name;
this.img = new Image()
this.img.src = 'monimage.jpg'
}
on_image_loaded(f) {
this.img.onload = f;
}
draw(){
ctx.drawImage(this.img,10,10)
}
}
var peter = new Person('Peter Griffin')
peter.on_image_loaded(function() {
peter.draw();
});
So I was trying to draw animgin a canvas I tried everything but in the console it says img is not a property or something like that I don't remember so can anyone help?
Here's the js
function setupcanvas() {
var canvas = document.querySelector('canvas')
var c = canvas.getContext("2d")
c.beginPath();
var img = new image()
img.src = "flappy_bird_bird.png"
img.onload = function(){
c.drawImage(img, 100, 100)
}
}
Edit
Thx to mhkanfer "sorry if the name is wrong" I fixed it
You were mostly right, though their are a couple of things:
Make sure Image() is capitalized
Make sure your image src file actually exists in that directory
And make sure your canvas has a width and height, if you haven't specified that anywhere, you canvas wont be shown
If you were to revise this, it would look something like:
function setupcanvas() {
var canvas = document.querySelector('canvas')
var c = canvas.getContext("2d")
canvas.width = canvas.height = 200;
var img = new Image()
img.src = "example.png"
img.onload = function(){
c.drawImage(img, 0, 0)
}
}
Earlier I used something like this (html5+javascript):
var img;
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
img = new Image();
img.onload = function() {
context.drawImage(img,0,0);
};
img.src = "maze.png";
Now I learn Haxe (platform-javascript) and can't write this code in accordance with js-libraries. I've found examples only for vector drawing.
Thanks!
It's quite possible to port that code to javascript; to find javascript classes in the Haxe API, just search them on api.haxe.org. In this case, the Image class is js.html.Image. Here is a basic example of image drawing: view example on try.haxe
var canvas = js.Browser.document.createCanvasElement();
canvas.width = 400;
canvas.height = 400;
js.Browser.document.body.appendChild(canvas);
var ctx = canvas.getContext2d();
var img = new js.html.Image();
img.onload = function() {
ctx.drawImage(img,0,0);
};
img.src = "http://dreamicus.com/data/maze/maze-02.jpg";
Alternative libraries exist that make this easier and more cross platform. You are not using the full haxe ecosystem to it's full if you are just writing code to get compiled to javascript - libraries such as kha and phaser will let you draw an image using a standard API that will let you target any platform.
You can port the exact code to Haxe:
https://try.haxe.org/#a7287
import js.Browser.*;
import js.html.*;
class Test {
static function main() {
var img;
window.onload = function() {
var canvas:CanvasElement = cast document.getElementById("myCanvas");
var context = canvas.getContext2d();
img = document.createImageElement();
img.onload = function() {
context.drawImage(img,0,0);
};
img.src = "maze.png";
}
}
}
I want to create a new ImageData object in code. If I have a Uint8ClampedArray out of which I want to make an image object, what is the best way to do it?
I guess I could make a new canvas element, extract its ImageData and overwrite its data attribute, but that seems like a wrong approach.
It would be great if I could use the ImageData constructor directly, but I can't figure out how to.
This is interesting problem... You can't just create ImageData object:
var test = new ImageData(); // TypeError: Illegal constructor
I have also tried:
var imageData= context.createImageData(width, height);
imageData.data = mydata; // TypeError: Cannot assign to read only property 'data' of #<ImageData>
but as described in MDN data property is readonly.
So I think the only way is to create object and set data property with iteration:
var canvas = document.createElement('canvas');
var imageData = canvas.getContext('2d').createImageData(width, height);
for(var i = 0; i < myData.length; i++){
imageData.data[i] = myData[i];
}
Update:
I have discovered the set method in data property of ImageData, so solution is very simple:
var canvas = document.createElement('canvas');
var imageData = canvas.getContext('2d').createImageData(width, height);
imageData.data.set(myData);
All modern browsers including Chrome, Edge, Firefox and Safari support the ImageData constructor. You can find its definition at MDN.
You can use it like this:
let imgData1 = new ImageData(data, width, height);
let imgData2 = new ImageData(width, height);
For very old browsers you can create this constructor yourself:
function ImageData() {
var i = 0;
if(arguments[0] instanceof Uint8ClampedArray) {
var data = arguments[i++];
}
var width = arguments[i++];
var height = arguments[i];
var canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext('2d');
var imageData = ctx.createImageData(width, height);
if(data) imageData.data.set(data);
return imageData;
}
The ImageData constructor is finally becoming available in Chrome and Firefox (see the compatibility table on mdn). There are two forms:
var imageData = new ImageData(width, height);
and if you want to build an instance with a UInt8ClampedArray object data:
var imageData = new ImageData(data, width, height); // height is optional
For compatibility reasons, it's best to use createImageData via a canvas 2D context though, as demonstrated in other answers.
There is the createImageData() method. But for this you need the context of an existing canvas.
var myImageData = context.createImageData(cssWidth, cssHeight);
See here for more information.
I'll post a link since theres to much to post here:
http://hem.bredband.net/noor/canvas.htm
My goal is to make the picture fit inside the window with the width of the image being the same as the window, even after resize. If the pictures height becomes to big for the window then the picture should resize itself according to the height and not the width.
Somewhere along my code there is something wrong.. forgive me if this is stupid, i am still learning..
Thanks!
I think this is the behavior you are trying to achieve. I refactored it so you only need to create one Image object (and changed the variable names to English so I could follow the code easier). Hopefully it's clear how the code works. Feel free to ask in the comments if you have any questions about it. The body onload property will need to be changed to "setupBackground();" instead of "draw();" to work with this code.
function setupBackground() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
function draw() {
canvas.width = 0;
canvas.height = 0;
var divHeight = div.scrollHeight;
var divWidth = div.scrollWidth;
var yScale = divHeight / img.height;
var xScale = divWidth / img.width;
var newImgHeight = img.height * xScale;
var newImgWidth = divWidth;
if (divHeight >= newImgHeight) {
newImgHeight = divHeight;
newImgWidth = img.width * yScale;
}
canvas.width = divWidth;
canvas.height = divHeight;
ctx.drawImage(img,0,0,newImgWidth,newImgHeight);
}
var img = new Image();
img.onload = function() {
window.onresize = draw;
draw();
}
img.src = 'ad.jpg';
};
As far as I know. You only want to make one call to getContext(). I didn't really analyze the code very much past this point though.