Canvas drawImage doesn't work without requestAnimationFrame(draw); [duplicate]
This question already has an answer here:
CanvasContext2D drawImage() issue [onload and CORS]
1 answer
HTML5 canvas - drawImage not always drawing the image
1 answer
I'm confused about this:
var cvs = document.getElementById("canvas");
var ctx = cvs.getContext('2d');
var background = new Image();
background.src = "pic/background.jpg";
function draw() {
ctx.drawImage(background,10,10,100,100);
}
requestAnimationFrame(draw);
The code above works. However, if I don't want to use requestAnimationFrame, the Image wouldn't be drawn. My goal is to let the image be shown on canvas by ctx.drawImage(background,10,10,100,100) instead of using function draw or requestAnimationFrame.
javascript html canvas
edited Nov 22 at 9:42
barbsan
2,14811122
asked Nov 22 at 9:31
Athena Ho
1
marked as duplicate by Durga, Chris G, Kaiido javascript
Users with the javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 22 at 10:12
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
This question already has an answer here:
CanvasContext2D drawImage() issue [onload and CORS]
1 answer
HTML5 canvas - drawImage not always drawing the image
1 answer
I'm confused about this:
var cvs = document.getElementById("canvas");
var ctx = cvs.getContext('2d');
var background = new Image();
background.src = "pic/background.jpg";
function draw() {
ctx.drawImage(background,10,10,100,100);
}
requestAnimationFrame(draw);
The code above works. However, if I don't want to use requestAnimationFrame, the Image wouldn't be drawn. My goal is to let the image be shown on canvas by ctx.drawImage(background,10,10,100,100) instead of using function draw or requestAnimationFrame.
javascript html canvas
edited Nov 22 at 9:42
barbsan
2,14811122
asked Nov 22 at 9:31
Athena Ho
1
marked as duplicate by Durga, Chris G, Kaiido javascript
Users with the javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 22 at 10:12
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
Trybackground.onload = function() { ctx.drawImage(background,10,10,100,100); };(you're trying to draw the image before it is loaded; as soon as you set.srcthe browser loads the image in the background, it won't pause your code)
– Chris G
Nov 22 at 9:34
Hello and welcome to Stack Overflow. What is your question?
– cmprogram
Nov 22 at 9:34
add a comment |
This question already has an answer here:
CanvasContext2D drawImage() issue [onload and CORS]
1 answer
HTML5 canvas - drawImage not always drawing the image
1 answer
I'm confused about this:
var cvs = document.getElementById("canvas");
var ctx = cvs.getContext('2d');
var background = new Image();
background.src = "pic/background.jpg";
function draw() {
ctx.drawImage(background,10,10,100,100);
}
requestAnimationFrame(draw);
The code above works. However, if I don't want to use requestAnimationFrame, the Image wouldn't be drawn. My goal is to let the image be shown on canvas by ctx.drawImage(background,10,10,100,100) instead of using function draw or requestAnimationFrame.
javascript html canvas
edited Nov 22 at 9:42
barbsan
2,14811122
asked Nov 22 at 9:31
Athena Ho
1
This question already has an answer here:
CanvasContext2D drawImage() issue [onload and CORS]
1 answer
HTML5 canvas - drawImage not always drawing the image
1 answer
I'm confused about this:
var cvs = document.getElementById("canvas");
var ctx = cvs.getContext('2d');
var background = new Image();
background.src = "pic/background.jpg";
function draw() {
ctx.drawImage(background,10,10,100,100);
}
requestAnimationFrame(draw);
The code above works. However, if I don't want to use requestAnimationFrame, the Image wouldn't be drawn. My goal is to let the image be shown on canvas by ctx.drawImage(background,10,10,100,100) instead of using function draw or requestAnimationFrame.
This question already has an answer here:
CanvasContext2D drawImage() issue [onload and CORS]
1 answer
HTML5 canvas - drawImage not always drawing the image
1 answer
javascript html canvas
javascript html canvas
edited Nov 22 at 9:42
barbsan
2,14811122
asked Nov 22 at 9:31
Athena Ho
1
edited Nov 22 at 9:42
barbsan
2,14811122
asked Nov 22 at 9:31
Athena Ho
1
edited Nov 22 at 9:42
barbsan
2,14811122
edited Nov 22 at 9:42
barbsan
2,14811122
edited Nov 22 at 9:42
barbsan
2,14811122
2,14811122
asked Nov 22 at 9:31
Athena Ho
1
asked Nov 22 at 9:31
Athena Ho
1
asked Nov 22 at 9:31
Athena Ho
1
1
marked as duplicate by Durga, Chris G, Kaiido javascript
Users with the javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 22 at 10:12
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Durga, Chris G, Kaiido javascript
Users with the javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 22 at 10:12
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
Trybackground.onload = function() { ctx.drawImage(background,10,10,100,100); };(you're trying to draw the image before it is loaded; as soon as you set.srcthe browser loads the image in the background, it won't pause your code)
– Chris G
Nov 22 at 9:34
Hello and welcome to Stack Overflow. What is your question?
– cmprogram
Nov 22 at 9:34
add a comment |
Trybackground.onload = function() { ctx.drawImage(background,10,10,100,100); };(you're trying to draw the image before it is loaded; as soon as you set.srcthe browser loads the image in the background, it won't pause your code)
– Chris G
Nov 22 at 9:34
Hello and welcome to Stack Overflow. What is your question?
– cmprogram
Nov 22 at 9:34
Try
background.onload = function() { ctx.drawImage(background,10,10,100,100); }; (you're trying to draw the image before it is loaded; as soon as you set .src the browser loads the image in the background, it won't pause your code)– Chris G
Nov 22 at 9:34
Try
background.onload = function() { ctx.drawImage(background,10,10,100,100); }; (you're trying to draw the image before it is loaded; as soon as you set .src the browser loads the image in the background, it won't pause your code)– Chris G
Nov 22 at 9:34
Hello and welcome to Stack Overflow. What is your question?
– cmprogram
Nov 22 at 9:34
Hello and welcome to Stack Overflow. What is your question?
– cmprogram
Nov 22 at 9:34
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Try
background.onload = function() { ctx.drawImage(background,10,10,100,100); };(you're trying to draw the image before it is loaded; as soon as you set.srcthe browser loads the image in the background, it won't pause your code)– Chris G
Nov 22 at 9:34
Hello and welcome to Stack Overflow. What is your question?
– cmprogram
Nov 22 at 9:34