This simple Canvas script creates a rectangle with a border and text. It works in Chrome and FireFox. But the text does not work in Internet Explorer 7.0. I have included excanvas.js; for this reason the rectangle and border show up in IE 7. However, the text is not showing up in IE 7. I want to know if it is possible to get this simple script to work in IE 7 and 8?
<!DOCTYPE html>
<html lang="en">
<head>
<link href = "style.css" type = "text/css" rel = "stylesheet" />
<script src="js/excanvas.js" type="text/javascript"></script>
<script type="text/javascript">
function addBox(){
var c = document.getElementById("myCanvas");
context=c.getContext("2d");
//Inner rectangle with shadow
context.fillStyle = 'red';
context.shadowColor="brown";
context.shadowBlur = 20;
context.fillRect(402,227,96.5,48.5);
context.shadowColor = null;
context.shadowBlur = null;
//Outer Rectangle
context.lineWidth = '5';
context.strokeStyle='green';
context.strokeRect(400,225,100,50); //draws just the edges of a rectangle
//font
context.font = '17px Arial';
context.textBaseline = 'top';
context.fillStyle = 'black';
context.fillText ('hello', 433, 243);
}
</script>
</head>
<body onload="addBox()">
<canvas id="myCanvas" width="900" height="500">Your browser does not support the canvas element.</canvas> <br />
<script type="text/javascript">
c = document.getElementById("myCanvas");
cxt4=c.getContext("2d");
resetCanvas();
</script>
</body>
</html>
I just tried this on mine and had the same results. Then I found that I was using an earlier revision of excanvas. Ran the code again with this version and it worked in IE8. Haven't tested on IE7 but with some luck it will work.
Steve
The fillText is working when i changed excanvas.js file
http://canvas-text.googlecode.com/svn-history/r48/trunk/excanvas.js
Related
I am currently working on showing some parts of a video by drawing them on canvas while showing the main part of the video as a video tag. Recently I ran into a weird situation where the canvas part stops drawing when it goes into full-screen mode on an older mobile phone(galaxy 7). It works fine on recent phones and PC.
So, I fiddled around and found out that drawImage will stop drawing in full-screen mode if the video is visible.
https://jsfiddle.net/2c8udb7j/1/
https://jsfiddle.net/2c8udb7j/2/
The two are same except that the second one has the line video.style.display = "none". Everything else is the same. You can check by clicking the 'play' button and then the 'fullscreen' button.
Anyone experience this issue or know about it or have a solution?
The fiddle code
html
<head>
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
<script src="MultiviewCore.js"></script>
<button onclick='video.play();'>play</button>
<button onclick='video.pause();'>pause</button>
<button onclick='document.body.requestFullscreen();'>fullscreen</button>
<div id='container'></div>
</body>
script
var container = document.getElementById('container')
var myRange = document.getElementById('myRange')
var video = document.createElement('video')
video.setAttribute("playsinline", "")
video.src = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
var canvas = document.createElement('canvas')
var ctx = canvas.getContext('2d')
canvas.width = 512
canvas.height = 384
canvas.style.width = '512px'
canvas.style.height = '384px'
video.style.width = '512px'
video.style.height = '384px'
video.style.display = "none" // the only difference
function updateCanvas() {
ctx.drawImage(video,
0,
0,
video.videoWidth,
video.videoHeight,
0,
0,
canvas.width,
canvas.height);
window.requestAnimationFrame(updateCanvas)
}
document.body.appendChild(canvas)
document.body.appendChild(video)
updateCanvas()
EDIT :
Just realized I'm testing this with chrome only. Tried it with galaxy 7's basic internet browser and full-screen drawImage works fine. Maybe a chrome or chromium issue?
I have a WWWeb page with stacked <canvas> elements. The goal is to draw something persistent in the lower canvas and draw, clear, and redraw, repeatedly, in the upper canvas. According to w3.org and this StackOverflow article (How do I make a transparent canvas in html5?), canvas elements are, by default, transparent. What I am seeing is that not only are they not transparent, but that overlaying via z-index is not working. Here's a "vanilla" version of the page's code (complete and used to generate the images):
<html>
<head>
<title>Canvas Stack</title>
<script>
function doStuff() {
drawStuff(document.getElementById("lowerCanvas"), 0, 1);
drawStuff(document.getElementById("upperCanvas"), 1, 0);
}
function drawStuff(cvs, p0X, p1X) {
var ctx = cvs.getContext("2d");
ctx.clearRect(0, 0, cvs.width, cvs.height);
ctx.strokeStyle = cvs.style.color;
ctx.beginPath();
ctx.moveTo(p0X * cvs.width, 0);
ctx.lineTo(p1X * cvs.width, cvs.height);
ctx.stroke();
}
</script>
</head>
<body onload="doStuff();" style="border:solid;">
<canvas id="lowerCanvas" style="color:red;height:200px;left:0;position:inherit;top:0;width:300px;z-index:0;" />
<canvas id="upperCanvas" style="color:blue;height:200px;left:0;position:inherit;top:0;width:300px;z-index:1;" />
</body>
</html>
and here's the result:
If I swap the order of the canvas elements
<canvas id="upperCanvas" style="color:blue;height:200px;left:0;position:inherit;top:0;width:300px;z-index:1;" />
<canvas id="lowerCanvas" style="color:red;height:200px;left:0;position:inherit;top:0;width:300px;z-index:0;" />
the result is
It seems as if the z-index has been ignored and that the order of declaration has primacy.
What I want is
(synthetic image)
The behavior is identical in Chrome, Edge, Firefox, and Internet Explorer under Windows 10. That makes me confident that I'm just missing some detail rather than experiencing an anomaly. However, I'm getting a flattened forehead from whacking my head against a wall and would really appreciate some guidance, here.
Thank you, all!
Some notes (maybe irrelevant; maybe not):
style="position:absolute;... (without the left and top entries) seems to do the same thing as style="left:0;position:absolute;top:0;...
In similar fashion, style="position:inherit;... is probably necessary if the canvas is to reside within a table's <td> and that <td> is other than the first one in a <tr>.
<html>
<head>
<title>Canvas Stack</title>
<script>
function doStuff() {
drawStuff(document.getElementById("lowerCanvas"), 0, 1);
drawStuff(document.getElementById("upperCanvas"), 1, 0);
}
function drawStuff(cvs, p0X, p1X) {
var ctx = cvs.getContext("2d");
ctx.clearRect(0, 0, cvs.width, cvs.height);
ctx.strokeStyle = cvs.style.color;
ctx.beginPath();
ctx.moveTo(p0X * cvs.width, 0);
ctx.lineTo(p1X * cvs.width, cvs.height);
ctx.stroke();
}
</script>
</head>
<body onload="doStuff();" style="border:solid;">
<div style="position:relative;min-height:200px">
<canvas id="lowerCanvas" style="color:red;height:200px;left:0;position:absolute;top:0;width:300px;z-index:0;"></canvas>
<canvas id="upperCanvas" style="color:blue;height:200px;left:0;position:absolute;top:0;width:300px;z-index:1;"></canvas>
</body>
</html>
You need to close your canvas elements explicitly. Simply close it with:
<canvas id="lowerCanvas" style="color:red;height:200px;left:0;position:inherit;top:0;width:300px;z-index:0;"></canvas>
instead of the embedded close "/>"
I also enclosed them in a div and used position:absolute so that they actually overlap...
My project is JSF+PRIMEFACES+JPA and i want to draw rectangles in a jsf web page (XHTML) .
that draw need to be showen after i click on a button based on a list of rectangle that already existe in the managed bean .
its possible to do that just with JSF and primefaces ? or i need to introduce javascript or something else ?
Update 1 :
i fount that richfaces have paint2d option . It'is possible to use just this functionnality from richfaces in my project ?
I think that you want this:
<!doctype html>
<html>
<head>
<title>Example</title>
<meta charset='utf-8' />
</head>
<body>
<input type="button" value="Click Me" onclick="changeColor()" />
<canvas id='example'>Somewhat</canvas>
<script>
var changeColor = function(){
var colors = ['red' ,'green','blue','yellow','brown','azure','gold'];
var example = document.getElementById("example"),
context = example.getContext('2d');
example.height = 480;
example.width = 640;
context.beginPath();
context.rect(188, 50, 200, 100);
context.fillStyle = colors[parseInt(Math.random()*colors.length)];
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();
}
</script>
</body>
</html>
Since the 5.1.8 elite release (or the 5.2-SNAPSHOT), Primefaces has the diagram component. It can create images you have above, so maybe that is something you cab use
I know that in js one must use canvas. Here simpliest example:
You can write javascript handler to capture click event and then invoke code that image a rectangle
<!doctype html>
<html>
<head>
<title>pathExample</title>
<meta charset='utf-8' />
</head>
<body>
<canvas id='example'>Обновите браузер</canvas>
<script>
var example = document.getElementById("example"),
context = example.getContext('2d');
example.height = 480;
example.width = 640;
context.beginPath();
context.rect(188, 50, 200, 100);
context.fillStyle = 'red';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();
</script>
</body>
</html>
In my console I get the error: "Uncaught TypeError: Cannot read property 'getContext' of null"
and I just can't find the error I've made... or what I've done wrong.
So maybe you can help me find it?
Please help :)
enter code here
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var cW = canvas.width = 1000;
var cH = canvas.height = 500;
var particleAmount = 10;
var particles = [];
for(var i=0;i<particleAmount;i++) {
particles.push(new particle());
}
function particle() {
this.x = (Math.random() * (cW-(40*2))) + 40;
this.y = (Math.random() * (cH-(40*2))) + 40;
this.xv = Math.random()*20-10;
this.yv = Math.random()*20-10;
}
function draw () {
ctx.fillStyle = "black";
ctx.fillRect(0,0,cW,cH);
for(var ii=0;ii<particles.length;ii++){
var p = particles[ii];
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(p.x,p.y,40,Math.PI*2,false);
ctx.fill();
}
}
setInterval(draw,30);
The error basically means that the HTML and the JavaScript code aren't cooperating properly, or simply that you haven't loaded the script correctly.
Try this:
function init() {
// Run your javascript code here
}
// Run the 'init' function when the DOM content is loaded
document.addEventListener("DOMContentLoaded", init, false);
Hope this helps.
The answer is in the comments just after the question! Someone else also posted it as an answer a bit below, but all credits to: #elclanrs
"Right, so the canvas doesn't exist yet. Load the script after the canvas element. – elclanrs Sep 13 '14 at 22:43"
I think you put the script tag above of the canvas tag please put it after the canvas tag.
Put the scripts file after the canvas. That means put down your script before the body tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas</title>
<link rel="shortcut icon" href="assets/1.png">
<link rel="stylesheet" href="assets/canvas.css">
</head>
<body>
<div class="container">
<h2>Canvas</h2>
<canvas id="myCanvas" width="400" height="300">
</canvas> <!-- End Canvas -->
</div> <!-- End Container -->
<script src="canvas.js"></script>
</body>
</html>
Try to declare the canvas element before the script tag. It worked fine for me.
<!DOCTYPE html>
<html land="en">
<head>
<meta charset="utf-8">
<title>Using video in the canvas tag</title>
<script type="text/javascript">
var vid,ctx;
function init(){
window.addEventListener("resize",onResize,false);
var can = document.getElementById('canvas1');
ctx = can.getContext('2d');
vid = document.createElement('video');
vid.src = 'video.mp4';
vid.autoplay = true;
vid.loop = true;
vid.addEventListener("canplaythrough", play, false);
}
function play(){
setInterval(function() {
ctx.drawImage(vid, 0, 0);
}, 1000/23.976);
}
</script>
<style type="text/css">
body{margin:0;}
</style>
</head>
<body onLoad="init();">
<canvas id="canvas1" width="1280" height="720"></canvas>
</body>
</html>
Im trying to get full screen video by scaling the canvas up, however the code above only works in Chrome. The video does not show up in firefox 10.0.2 nor safari 5.05. I tried three different files: mp4,ogv, and webm. What's wrong with my code. I know there is a tag but can I scale it the same way I can with a canvas?
Some implementations working with all current HTML5 capable browsers including Firefox, Safari and Chrome (based on the new FullScreen API):
http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api
https://github.com/sindresorhus/screenfull.js
http://www.html5-fullscreen-video.com/html5_fullscreen/tutorial/fullscreen_solutions/18
https://developer.mozilla.org/en/DOM/Using_full-screen_mode