|
JavaScript - Fullbrowser Canvas Element W/o Scrollbars
I'm playing around with full browser canvas element it seems to spill beyond the browser bounds generating horizontal and vertical scrollbars.
This is the technique I'm using: Code: <canvas id="c" width="1" height="1"></canvas>
<script type="text/javascript">
var ce = document.getElementById("c");
var cc = ce.getContext("2d");
function draw() {
var ctx = (cc);
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
//
ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
ctx.fillRect(0, 0, ctx.canvas.width, 100);
}
draw();
$(window).resize($.debounce(100, function() {
draw();
}));
</script>
I've also tried to wrap the canvas element inside a div and set that div's overflow equal to hidden, but the results are unchanged. Does anyone have any insight on this? Similar TutorialsI am very new to javascript(and these forums) and I am teaching my self to use the canvas element. I am trying to draw an image to the canvas but nothing is appearing. And I am getting no error in the chrome console. Can anyone see why? Code:
function RPGanimation(options)
{
this.initcanvas(options);
this.initbackground(options);
};
RPGanimation.prototype = {
initbackground: function(options){
this.background = new Image();
this.background.src = options.backsource;
this.background.onload = this.drawbackground();
},
initcanvas:function(options){
this.canvas = document.getElementById(options.canvasid);
this.context = this.canvas.getContext('2d');
this.dimensions = {width:this.canvas.width,height:this.canvas.height};
},
drawbackground:function(){
//document.write('<IMG SRC="Chrysanthemum.jpg">');
this.context.drawImage(this.background,0,0,this.dimensions.width,this.dimensions.height);
}
};
I create the object in a webpage with the canvas element created just before that script tag... The bit of code in bold in the code below is giving me this error in IE: Error: Code: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; Tablet PC 2.0; InfoPath.2; OfficeLiveConnector.1.4; .NET CLR 3.0.30729; OfficeLivePatch.1.3; MSN OptimizedIE8;ENGB) Timestamp: Tue, 16 Mar 2010 15:07:11 UTC Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917) Line: 0 Char: 0 Code: 0 URI: http://www.mateinastate.co.uk/users/mateinastate Code: Code: if(document.getElementById('msn1').innerHTML=="")
{
document.getElementById('msn1').style.display='none';
}
if(document.getElementById('yahoo1').innerHTML=="")
{
document.getElementById('yahoo1').style.display='none';
}
if(document.getElementById('skype1').innerHTML=="")
{
document.getElementById('skype1').style.display='none';
}
if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,18)=='<a href="http://">')
{
document.getElementById('facebook1').style.display='none';
}
else if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,11)=='<a href="">')
{
document.getElementById('facebook1').style.display='none';
} else
{
document.getElementById('fbook-add').innerHTML='Facebook Profile';
}
What it's saying isn't actually true (I don't think)... this is how the section is laid out: Code: <div id="submenu1" class="anylinkcss"> <ul> <li class="contact-pm"><a href="/index.php?do=pm&act=new&to=$RateViewProfileUserName$&returnurl=$ReturnURL$">PM me</a></li> <li class="contact-email"><a href="/index.php?do=email&id=$RateViewProfileUserId$">E-mail me</a></li> <li class="contact-msn" id="msn1">$RateViewProfileUser-profile_msn$</li> <li class="contact-yahoo" id="yahoo1">$RateViewProfileUser-profile_yahoo$</li> <li class="contact-skype" id="skype1">$RateViewProfileUser-profile_skype$</li> <li class="contact-facebook" id="facebook1"><a href="$RateViewProfileUser-profile_facebook$"><span id="fbook-add"></span></a></li> </ul> </div> <script type="text/javascript" src="/html_1/js/contact-information.js"></script> Does anyone know why this might error in just IE? Hello everyone, I am very curious, how are the scroll bars disabled on this web-site: http://www.nofrks.com/# I know how to disable scroll bars in a new window with Javascript, but how would I disable scroll bars on the web-site? Could someone please give me an idea? Thank you very much Hi all,I am very new to coding so please be patient with me!I am trying to add a link to a web page which will open a new window which has no scrollbars ,toolbars,menu etc for a nice clean look(the window will display a flash image display gallery) I know you do this with javascript but am having trouble placing the javascript in the html ,what would be ideal is if someone was kind enough to give me an example of exactly how the complete page code would look with the javascript included,it need only be a very simple page with no content except the link which maybe we could just call sample,I would be most grateful for any help you can give me.Thankyou!
I can't seem to get any scrollbars on my Safari Windows Browser to display. I've tried removing my image height and width parameters but it doesn't make any difference. I'm trying to popup a window and when the image is larger than the window, I want to be able to use the scrollbars to see the image. My javascript code (pretty standard I think): PHP Code: function popup_window(url,w,h) { var width=w; var height=h; var from_top=10; var from_left=10; var toolbar='no'; var location='no'; var directories='no'; var status='no'; var menubar='no'; var scrollbars='yes'; var resizable='yes'; var atts='width='+width+'show,height='+height+',top='+from_top+',screenY='; atts+= from_top+',left='+from_left+',screenX='+from_left+',toolbar='+toolbar; atts+=',location='+location+',directories='+directories+',status='+status; atts+=',menubar='+menubar+',scrollbars='+scrollbars+',resizable='+resizable; window.open(url,'win_name',atts); } My calling PHP code as a link on the thumbnail image to be clicked on to popup the window: PHP Code: <A HREF="https://www.mysite.com/<?php echo $php_photo_filename?>" onClick="return popup_window('https://www.mysite.com/<?php echo $php_photo_filename?>', <?php echo $php_popup_width?>, <?php echo $php_popup_height?>)"><IMG SRC="<?php echo $php_small_photo_filename?>" WIDTH="<?php echo $php_small_width?>" HEIGHT="<?php echo $php_small_height?>" BORDER="1"></A> Thanks for any help... I have an iFrame on which I wish to display scrollbars ONLY when the mouse is over the iFrame AND the source of the iFrame is larger than the iFrame can display I am using the following code for the iFrame but believe that I need to add some script to make it work: Code: <iframe src="http://www.mhgoebel.com" frameborder="0" id="frame" width="320" height="356" scrolling="no">
onmouseover="setScrolling('auto')" onmouseout="setScrolling('no')"
</iframe>
i want the scrollbars to be preset at the bottom of the div each time someone visits the site. Code: <div id="scroller-shoutbox" border="0" cellspacing="0" style="background-image:url(images/table-bg.png);border-bottom:solid 1px #333; width:498px; height:300px;border-left:solid 1px #333;border-right:solid 1px #333; overflow-x: hidden; overflow-y: auto;"> <table border="0" cellspacing="0" width="500"> <tr><td></td></tr> <!--- PHP array here in actuallity, but i figured it wasnt relevant to this post ---> <tr><td></td></tr> </table> </div> you can see the problem i am talking about here http://tomhilsee.com/ipool/index.php the latest content is unseen because the scrollers are at the top Hi, I'm relativly new to JS and brand new to the forum so you might need to dumb down your replys for my slightly lacking knowledge. That being said I do have a very solid grasp of html, css and am getting there with JS and its various frameworks. I'm integrating wordpress into an existing site for a friend and currently have the main blog page appear in a DIV. This is the best way to integrate in this case due to many reasons mostly of way the site is constructed. Code: <div class="scroll-pane" id="scrollbox"> WORDPRESS BLOG </div> My issue is that links within that DIV, in the blog, when clicked redirect the page. The simple answer to this would be to have them just open in a new page, which I can easily do with the below code. Code: function Init()
{
// Grab the appropriate div
theDiv = document.getElementById('scrollbox');
// Grab all of the links inside the div
links = theDiv.getElementsByTagName('a');
// Loop through those links and attach the target attribute
for (var i=0, len=links.length; i < len; i++) {
// the _blank will make the link open in new window
links[i].setAttribute('target', '_blank');
}
}
window.onload = Init;
But what I'd rather it do is have any link clicked inside the DIV to reload in that same DIV, similar to an iframe, but obviously without using an iframe, due to it's compatibility issues. Is this possible by editing the above code? If not what do I need? Thanks in advance for any help! I've been reading a lot of tutorials on the canvas tag and seen a lot of people using JavaScript that looks something like: ctx.beginPath(); ctx.moveTo(25,25); ctx.lineTo(105,25); ctx.fill(); I understand that ctx is just the variable name and I can replace that with any variable I define, however, I'm looking for a list of all of the methods such as (moveTo, lineTo, fill etc...), as well as what they do. I hope I'm explaining this or asking this correctly. Thanks! -Mike Hey everyone, I have been practicing using canvas to make designs. My current code below will load the word the user inputs and makes it bounce around the canvas as well as a text spinner. However, whenever the user inputs a second word, the bounce below stops to start a new one and the text spinner messes up. I was wondering if anyone could help me so when the user inputs another word, that it either reloads a new textspinner or adds another one, as well as just add the word to the canvas without stopped the old one. Here's my current script. Thanks already, Joey Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
var ctx;
var a=0.0;
var as=true;//true a is increasing, false decreasing
var x,y;
var xs = 1;
var ys = 1;
var userWord
var myDiv, t;
var test = 0;
var ds ="";//display string
var sli =0; //spinning letter index;
function init(){
ctx = document.getElementById("myCvs").getContext("2d");
userWord = document.getElementById("userWord").value;
x=Math.floor(Math.random()*801)
y=Math.floor(Math.random()*601);
drawText();
setInterval("onEnterFrame()", 50);
myDiv = document.getElementById("myDiv");
for (i =0; i<=userWord.length;i++){
ds += "*";
}
myDiv.innerHTML =ds;
textSpin();
}
function textSpin(){
myChar = randomChar();
var newString = userWord.slice(0, sli);
newString +=myChar;
newString += ds.slice(sli+1, ds.length-1);
myDiv.innerHTML = newString;
if (myChar == userWord.charAt(sli)){sli++;}
if (sli<userWord.length){
t = setTimeout("textSpin()", 80);
}
}
function randomChar(){
var rc = Math.random()*26 + 97; //random lowercase char code
return String.fromCharCode(rc);
}
function onEnterFrame(){
if(a>1){as = false;}
if(a<0){as = true;}
if(as){
a+=0.01;
}else{
a-=0.01;
}
if(x>800){xs = -1}
if(x<0){xs=1}
if(y>600){ys = -1}
if(y<0){ys=1}
x+=10 *xs;
y+=10 *ys;
drawText();
}
function drawText(){
ctx.font = "20px Times New Roman";
//ctx.fillStyle= "rgb(256,256,256)";
//ctx.fillText("Hello", x, y);
ctx.fillStyle = randomColor();
ctx.fillText(userWord, x,y);
}
function randomColor(){
var r = Math.floor(Math.random()*150)+55;
var g = Math.floor(Math.random()*256)+150;
var b = Math.floor(Math.random()*20)+50;
var a = Math.random();
return "rgba("+ r+ ","+g+","+b+","+ a+")";
}
//function randomFont(){
// var s = Math.floor(Math.random()*100) +100;
// return s; //+ "px Times New Roman";}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
background-color:#000;
}
#myDiv {
color:#FFF;
}
</style>
</head>
<body onLoad=""><center>
<input type="text" id="userWord" value=""> </input><br>
<input type="button" id="enterWord" value="Enter Word" onClick="init()" ></input><br><br>
<div id="myDiv" > </div>
<canvas id="myCvs" width="800px" height="600px" /><br>
<br>
</center>
</body>
</html>
Hi there! How should I write this - better than it's now - so that when I rotate a figure, in the next "frame" it would stay rotated? Second thing - if you run this code, and set the angle for, let's say 180 degrees the figure is being drawn in some random location. How do I fix this? Code: Code:
function GenericFigure(context) {
this.states = ["wait", "moving", "rotating", "stop"];
this.state = this.states[0];
this.ctx = context;
this.sqrW = this.sqrH = 20;
this.ctxW = 200;
this.ctxH = 350;
this.colorsO = {
red : "#ee1515",
green : "#45d137",
blue : "#17a3f3",
orange : "#ff910f",
purple : "#680077"
};
this.colorsA = ["#ee1515", "#45d137", "#17a3f3", "#ff910f", "#680077"];
this.pickColor = function() {
var num = Math.floor(Math.random() * 5);
return this.colorsA[num];
}
}
function Rectangle(context) {
this.inheritFrom = GenericFigure;
this.inheritFrom(context);
this.width = this.sqrW;
this.height = this.sqrH * 3;
this.x = this.ctxW / 2;
this.y = 0;
this.rotation = -1;
this.setRotation = function(angle) {
this.rotation = angle;
}
this.rotate = function() {
this.ctx.clearRect(0, 0, this.ctxW, this.ctxH);
this.ctx.translate(this.x + 2 * this.width, this.y - 2 * this.height + 20);
this.ctx.rotate(this.rotation * Math.PI / 180);
this.ctx.fillRect(this.ctxW / 2, 0, this.width, this.height);
this.ctx.restore();
}
this.moveDown = function() {
this.y += 20;
this.ctx.restore();
this.ctx.clearRect(0, 0, this.ctxW, this.ctxH);
this.ctx.fillRect(this.x, this.y, this.width, this.height);
this.ctx.save();
if(this.rotation > -1) {
this.rotate();
}
l("A");
}
this.draw = function() {
this.ctx.fillStyle = this.pickColor();
this.ctx.save();
this.ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
//a tak można wywołać:
var ctx = document.getElementById("game").getContext("2d");
var rect = new Rectangle(ctx);
rect.draw();
var inte = setInterval(function(){if(rect.y >= rect.ctxH - rect.height){clearInterval(inte);return;}if(rect.y == 60) rect.setRotation(90);rect.moveDown();}, 500);
And the third problem: Code: this.ctx.translate(this.x, 0); I thought, that this line should set orientation point to top left corner of my figure, but it seems, that it doesn't - after rotation my figure is being drawn two heights lower. Again - how do I fix it? Any help will be much appreciated . Code: <form>
<input id="a" size=4 name="neg" placeholder="1st Screen size in inch">
<input id="b" size=4 name="hoyr" placeholder="2nd Screen size in inch">
<input type="submit" value="GO!" onclick="getValue()">
</form>
</div>
<canvas id="MyCanvas" width="1000" height="1000"></canvas>
<script type="text/javascript">
function getValue()
{
var x = document.getElementById("a").value;
var y = document.getElementById("b").value;
var aWidth;
var aHeight;
var bWidth;
var bHeight;
var c= document.getElementById("MyCanvas");
var ctx= c.getContext("2d");
ctx.fillStyle="#4AA02C";
ctx.fillRect(0,0,x,y);
}
Here, it draws canvas then disappears immediately. Anyone got any suggestions on techniques? The main one I find is to use translate to move the canvas around, which just seems odd to me. I don't even fully understand how it works. But the one I was looking at used clearRect. In examples given looked as though it had to redraw the canvas every frame. I'm just mucking around with a simple poker game, figured i'd have the table in one layer and anything that moves on a top layer? By doing that I could only clear each card as it moved around...yes? Anyone know of a better way of doing things? Hello guys! I need your help! I want to create a rectangle with a line in the middle with the canvas object. The problem is that the line in the middle gets bigger than the rest of the rectangle. How do I solve this? I believe it has something to do with shadows. If so, how do I turn them off. My code is: <html> <head> <title></title> </head> <body> <canvas id='chart' width='400' height='200'> <script type="text/javascript"> var canvas = document.getElementById('chart'); var ctx = canvas.getContext('2d'); ctx.lineWidth = 10; ctx.strokeRect(0, 0, 400, 200); ctx.moveTo(0, 100); ctx.lineTo(400, 100); ctx.stroke(); </script> </body> </html> So I've been making a game using html canvas. Here is a link to the game. (Move around with wasd, rotate turret with left and right arrows) http://db.tt/ei3LlR The problem is that the shadow flickers when it is rotated. This does not happen in firefox. The shadow is not an image, but another canvas element, generated dynamically from the image of the tank. So the problem seems to be with webkit drawing rotated canvas elements inside another. Could this possibly be the reason behind this, or is it more likely to be a problem on my end? I just cant wrap my mind around canvas. As far as I can tell theres no logical reason as to why the code would not work. Could someone take a look at it and possibly figure out whats wrong? I'm trying to intialize and draw a canvas with a simple image. I have the functions in a custom namespace in javascript. I am also using Jquery Code: var birdr = new Image();
var birdl = new Image();
$(document).ready(function(){
if(Modernizr.canvas){
var c = document.createElement('canvas');
LK.animLoad();
document.getElementById('backg-canvas').appendChild(c);
$('canvas').attr({'width':'500','height':'500','id':'canvas'});
var context = LK.returnCanvas();
context.drawImage(birdl, 400,487,10,10);
}
});
var LK = {
birdx: 400, //unused (lets just get it to draw the image first :\)
birdy: 487, //unused
animLoad: function(){
birdl.src = "images/bird2.png";
birdr.src = "images/bird.png";
//alert(birdl);
//alert(birdr);
},
returnCanvas: function(ca){
var b_canvas = LK.getCanvas();
var b_context = b_canvas.getContext('2d');
return b_context;
},
getCanvas: function(){
var a_canvas = document.getElementById('canvas');
//alert(a_canvas);
return a_canvas;
}
}
Any help would be greatly appreciate thanks. Btw safari web inspector indicates the canvas is getting properly created and appended to the container div. So that all works fine. not sure if this is the right place to ask canvas questions, but if it is, i'm trying to program a game like air hockey (with some twists). it works pretty well now but the table is viewed from overhead, and i would prefer to show the game from the player's perspective, as in the pic, without having to rewrite my existing code. anyone know of any js libraries or formulas which can accomplish this? I guess canvases like inline width/height instead of css width/height. This solved the issue. I'm working on a project that uses HTML5 Canvas and I'm having a strange problem with stretching. I noticed it with images and thought my math might have been wrong but then I took everything out and tried drawing a simple 100x100 square and it's completely stretched out at different proportions. The code for this (small class code)- Code: function Canvas(DOMID, F)
{
this.Frame = null;
this.width = null;
this.height = null;
this.zoom = null;
this.DOM = null;
this.ctx = null;
this.offset = null;
//Constructor
this.init = function(DOMID, F)
{
this.DOM = document.getElementById(DOMID);
this.width = $(this.DOM).width();
this.height = $(this.DOM).height();
this.ctx = this.DOM.getContext("2d");
this.zoom = 1;
this.offset = {x:0,y:0};
if(F != null)
this.setFrame(F);
this.onReady();
}
//Modifiers
this.draw = function()
{
//this.ctx.drawImage(image, 0, 0);
this.ctx.beginPath();
this.ctx.fillStyle = "#ffffff";
this.ctx.rect(0,0,100,100);
this.ctx.closePath();
this.ctx.fill();
}
this.setFrame = function(F)
{
this.Frame = F;
}
//Events
this.onReady = function(){}
this.init(DOMID, F);
}
The code calling this function is in an interval- Code: window.goToCanvas = function()
{
clearTimeout(playInterval);
playInterval = setInterval("drawCurrentCanvas()", window.playSpeed);
}
window.drawCurrentCanvas = function()
{
index = window.canvasIndex;
canvases[index].draw();
}
The page can be found here- http://micahwilliams...ewer/viewer.php I'm stumped. I hope someone can see my mistake somewhere. Hi all, I'm new to Javascript, and having an issue with getInterval. For my programming languages class we have to create a simulation of waves breaking on a shore from above. I've decided to use a canvas object and Javascript for this animation, but am getting stuck on refreshing the frames. Here is the code I have so far: Code: var shoreline = new Array();
var waves = new Array();
var canWidth = 600;
var canHeight = 400;
var waveNum = 0;
var count = 0;
function wave() {
setupShore();
var canvas = document.getElementById("canvas");
canvas.setAttribute("width",canWidth);
canvas.setAttribute("height",canHeight);
var ctx = canvas.getContext("2d");
createWave();
setInterval(update(ctx), 1000);
}
function update(ctx) {
if(waves.length != 0) {
drawWater(ctx);
drawShore(ctx);
drawWaves(ctx);
updateWaves();
}
}
function drawElement(ctx, x, y, width, height, fillcolor) {
ctx.fillStyle = fillcolor;
ctx.fillRect(x, y, width, height);
}
function setupShore() {
for(var i = 0; i <= canWidth/5; i++) {
shoreline[i] = Math.round(canHeight/5); // + Math.floor(Math.random()*101);
}
}
function createWave() {
/* Wave array setup:
[ [waveID1, [node1, node2, ..., nodeN]],
[waveID2, [node1, node2, ..., nodeN] ] */
waves.push([waveNum, []]);
for(var c = 0; c <= canWidth/5; c++){
waves[waves.length-1][1].push(canHeight);
}
waveNum = waveNum + 1;
}
function destroyWave() {
waves.shift();
}
function drawWater(ctx) {
drawElement(ctx, 0, 0, canWidth, canHeight, "#336699");
}
function drawShore(ctx) {
for(var s = 0; s <= shoreline.length; s++) {
drawElement(ctx, s*5, 0, 5, shoreline[s], "#FFCC00");
}
}
function updateWaves() {
for(var u = 0; u < waves.length; u++) {
var limit = waves[u][1].length;
for(var v = 0; v < limit; v++){
var temp = waves[u][1][v]-5;
waves[u][1][v] = temp;
if(waves[u][1][v] <= shoreline[v]){
destroyWave();
}
}
}
}
function drawWaves(ctx) {
for(var w = 0; w < waves.length; w++) {
for(var n = 0; n <= waves[w][1].length; n++){
y = waves[w][1][n];
drawElement(ctx, n*5, y, 5, 5, "Purple");
}
}
}
As you can see, the idea is that each 5-pixel wide node of the shore and wave are stored in arrays so that the position of each node can differ. The wave() function initializes all the required data, and then calls setInterval on update(). The function update() draws the water, shore, and wave, and then updates the wave position node-by-node. Ideally, setInterval would cause this to happen repeatedly, so that the wave would appear to move closer to the shore every 1000ms. However, this is not the case. It appears as though setInterval is working for one pass of update(), but fails after the first pass. You can tell that this is happening because the wave appears at its starting position, but does not continue to move. Any idea why this is happening? I read somewhere that setInterval can be broken by one-time functions, but I'm not sure. If you'd like to see what it's currently doing in a browser, I've hosted it here. Once I've got this animating properly I can continue my project, but I've hit a roadblock. Thanks in advance for your help, I'm really stuck. Marcus Hi. I'm writing a script that graphs data in different colors and shapes and I'm encountering two problems: (1) I can't specify different colors for the graph I'm rendering. If I use fillStyle="red"; then the entire chart becomes red. It seems to use the last color specified as the color for everything on the chart. (2) The shapes are overlapping in strange ways. The fills are not covering the lines of shapes behind them so it's unclear which shape is in front and which is behind. It's like they aren't being treated as separate shapes but instead one shape where boundaries are unclear. I don't know how else to explain it. I'm hoping there is some way to put each shape in its own layer. Would I have to use DIV IDs for that or is there a way to keep it all in the script so it's more scalable? |
|||||||