Hi I have managed to make excanvas work in IE8 for simple examples however I couldn't make the following canvas example which contain drawimage work at IE8. Does anyone have any experience with excanvas and drawimage.
Thanks for your help...
var foo = document.getElementById("foo");
var canvas = document.createElement('canvas');`
canvas.setAttribute("width", 300);
canvas.setAttribute("height", 300);
foo.appendChild(canvas);
canvas= G_vmlCanvasManager.initElement(canvas);
var ctx = canvas.getContext('2d');
ctx.save();
ctx.clearRect( 0, 0, canvas.width, canvas.height );
ctx.translate( canvas.width/2 , canvas.height/2 );
ctx.drawImage( image, -165, -160 );
ctx.rotate( 100 * Math.PI / 180);
ctx.drawImage( image2, -13, -121.5 );
ctx.restore();
image1.src = 'img.png';
image2.src = 'img2.png';
Use a test case to isolate drawImage:
<!DOCTYPE html>
<html>
<head>
<title>Overflow Test</title>
<style>
body {
text-align: center
}
</style>
<!--[if IE]><script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/excanvas.js"></script><![endif]-->
<script>
window.onload = function() {
var ctx = document.getElementById('c').getContext('2d');
var img = document.images[0];
ctx.rotate(Math.PI / 8);
ctx.drawImage(img, 50, 50);
img.style.display = 'none';
};
</script>
</head>
<body>
<img src="http://opera.com/favicon.ico">
<canvas id="c" width="200" height="200"></canvas>
</body>
</html>
References
Explorer Canvas test cases: drawimage.html
Related
I am trying to make a canvas with a black square and a moving white circle but it is not working and i dont know why here is the issue it is just an empty webpage when i try to open it. I have saved and evreything. i really need help! here is the code
<html>
<head>
<title>paddle</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
var canvas
var canvasContext
var ballX = 5
window.onload = function() {
var fps = 30;
setInterval(updateAll, 1000)
canvas = document.getElementById("myCanvas");
canvasContext = canvas.getContext("2d")
}
function updateAll() {
ballX++
canvasContext.fillStyle = "black"
canvasContext.fillRect(0, 0, canvas.width, canvas.height)
canvasContext.fillStyle = "white";
canvasContext.beginPath()
canvasContext.arc(ballX, 100, 10, 0, Math.PI*2 true);
}
</script>
</body>
</html>
You're missing a comma before the last argument here (between Math.PI*2 and true):
canvasContext.arc(ballX, 100, 10, 0, Math.PI*2 true);
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var background = new Image();
var ground = new Image();
var canon_base = new Image();
var gun = new Image();
$(function() {
var angleInDegrees = 0;
var image = document.createElement("img");
image.onload = function() {
context.drawImage(image, canvas.width / 2 - image.width / 2, canvas.height / 2 - image.width / 2);
}
image.src = "images/gun.png";
$("#clockwise").click(function() {
angleInDegrees += 10;
drawRotated(angleInDegrees);
});
$("#counterclockwise").click(function() {
angleInDegrees -= 10;
drawRotated(angleInDegrees);
});
function drawRotated(degrees) {
context.clearRect(0, 0, canvas.width, canvas.height);
context.save();
context.translate(canvas.width / 2, canvas.height / 2);
context.rotate(degrees * Math.PI / 180);
context.drawImage(image, -image.width / 2, -image.width / 2);
context.restore();
}
});
background.onload = function() {
context.drawImage(background, 0, 0);
context.drawImage(ground, 0, 565);
context.drawImage(canon_base, 10, 430);
document.body.appendChild(canvas);
};
background.src = 'images/background.png';
ground.src = 'images/ground.png';
canon_base.src = 'images/canon_base.png';
// gun.src='images/gun.png';
<!doctype html>
<head>
<title>HTML5 games workshop: One-screen platformer</title>
<meta charset="utf-8">
<!-- <script src="js/phaser.min.js"></script> -->
<!-- <script src="js/jquery-3.1.1.min"></script> -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body>
<canvas id="myCanvas" width="900" height="600" style="border:1px solid #000000;"></canvas>
<div id="game">
<button id="clockwise">Rotate right</button>
<button id="counterclockwise">Rotate left</button>
</div>
</body>
I'm trying to make a small game, for that I need to rotate a cannon gun.So I used jquery code in the above.It works well.But the problem is when rotating image and other images and it rotates in white background.How can I Fix this
In My case i have performed path clipping and then draw a image in clipped region. But it does not working.
here my code.`
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var offset = 50;
/*
* save() allows us to save the canvas context before
* defining the clipping region so that we can return
* to the default state later on
*/
context.save();
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI, false);
context.clip();
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 69, 50);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth- vader.jpg';
</script>
</body>
</html>
Now image render without clipping.
Please share your valuable key to do this.
Hello I wanted to know if anyone can provide tips or direction on an issue i'm having with a triangle animation. I have a partial animation that is not continuous, it jitters at the end of the animation. I'm looking for advise how to make a full rotation. If anyone can also assist in how to add multiple rotations that would be amazing.
Thank you ..
<!DOCTYPE html>
<html>
<head>
<title>Triangle Animation Team B</title>
</head>
<body>
<canvas id="canvas" width="900" height="600"></canvas>
<script>
function makeTriangle(x1,y1,x2,y2,x3,y3) {
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
var Array = ['red','green', 'black'];
var color = Array[Math.floor(Math.random() * 3)];
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.lineTo(x3,y3);
ctx.lineTo(x1,y1);
ctx.fillStyle = color;
ctx.fill();
}
}
makeTriangle('400','38','465','76','200','400');
var x = 200;
window.setInterval( function() {
var context = document.getElementById('canvas').getContext('2d');
context.clearRect(0, 0, 1000, 500, 0);
x++;
if (x > 500) x = 300;
makeTriangle('400','38',x,'76','400','200');
}, 20);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
window.onload = function(){
var canvas = document.getElementById("map"),
c = canvas.getContext("2d");
c.fillStyle = "black";
c.fillRect(0, 0, canvas.width, canvas.height);
c.fillStyle = "red";
c.fillRect = (20, 30, 50, 250);
c.fillSyle = "white";
c.fillRect = (50,50,25,25);
};
</script>
</head>
<body>
<canvas id="map" width="800" height="400">
<img src="images/sad dinosaur.jpg" />
You will need an updated browser to view this page!
</canvas>
</body>
</html>
I am just tinkering a bit with canvas trying to get a feel for how it works. However, the tutorial video I am watching shows the coding for the c.fillRect and the c.fillStyle in the exact same format that i have shown in my code yet my screen only displays the black rectangle from the first set of instructions.
The syntax for fillRect is c.fillRect(...), as opposed to c.fillRect = (...). Compare your last two calls with your first call.
Also, your last fillStyle is mistyped as fillSyle.
window.onload = function () {
var canvas = document.getElementById("map"),
c = canvas.getContext("2d");
c.fillStyle = "black";
c.fillRect(0, 0, canvas.width, canvas.height);
c.fillStyle = "red";
c.fillRect(20, 30, 50, 250);
c.fillStyle = "white";
c.fillRect(50, 50, 25, 25);
};
WORKING EXAMPLE