Menu
I am dragging an image within a canvas. But during the drag image flickers. I think there is some problem in function calling. I have implemented functions with onmousedown, onmouseup and onmousemove events. I am drawing the image onto canvas during drag.
Here is my code,
<html>
<head>
</head>
<body>
<div>
<canvas id="canvas5" height="500" width="500" style = "position:relative;left:500px; border:2px solid black;"> This text is displayed if your browser does not support HTML5 Canvas. </canvas>
</div>
<script type="text/javascript">
var x2 = 100;
var y2 = 100;
var ctx;
var can;
var img=new Image();
function drawcan() {
can = document.getElementById("canvas5");
ctx = can.getContext('2d');
ctx.clearRect(0, 0, 500, 500);
img.onload = function(){
ctx.drawImage(img,x2 - img.width/2,y2 - img.height/2, img.width,img.height);
};
img.src="images/213.jpg";
};
function myMove(e){
x1 = e.pageX - x2 - can.offsetLeft;
x2 = x2 + x1;
y1 = e.pageY - y2 - can.offsetTop;
y2 = y2 + y1;
drawcan();
};
function myDown(e) {
if (e.pageX < x2 + img.width/2 + canvas5.offsetLeft)
if (e.pageX > x2 - img.width/2 + canvas5.offsetLeft)
if (e.pageY < y2 + img.height/2 + canvas5.offsetTop)
if (e.pageY > y2 - img.height/2 + canvas5.offsetTop){
can.onmousemove = myMove;
};
};
function myUp(e){
can.onmousemove = null;
};
drawcan();
can.onmousedown = myDown;
can.onmouseup = myUp;
</script>
</body>
</html>
231
function drawcan() {
can = document.getElementById("canvas5");
ctx = can.getContext('2d');
ctx.clearRect(0, 0, 500, 500);
img.onload = function(){
ctx.drawImage(img,x2 - img.width/2,y2 - img.height/2, img.width,img.height);
};
img.src="images/213.jpg";
};
See what this does? Every time you call drawcan, it loads the image before painting it somewhen later. Of course, the image is cached, but this process needs its time. Instead, wait for the image to load before doing anything, and then never load it again.
var img = new Image(),
load = false,
can = document.getElementById("canvas5"),
ctx = can.getContext('2d');
img.onload = function() {
load = true;
drawcan(); // init
};
img.src="images/213.jpg";
function drawcan() {
if (!load) return;
ctx.clearRect(0, 0, 500, 500);
ctx.drawImage(img, x2 - img.width/2,y2 - img.height/2, img.width,img.height);
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
