Can't draw on canvas of a certain size - html

For some reason, if the second canvas in the following code has a height of more than 526 pixels, nothing will draw to it in Chrome. It works fine as long as height < 527, and always works in Firefox. Anyone know what I'm doing wrong? I'm very new to HTML, so sorry if I've missed something.
<!doctype html>
<html>
<head>
<script type="text/javascript">
function init()
{
var canv = document.getElementById("myCanvas");
var ctx = canv.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, canv.width, canv.height);
}
</script>
<style type="text/css">
canvas {border: 1px solid black; }
</style>
</head>
<body onload="init()">
<canvas id="mainFrame" width="700" height="700"></canvas>
<canvas id="myCanvas" width="125" height="527"></canvas> <!-- cannot exceed
526 ... WHY? -->
</body>
</html>

I tried this on my chrome v.24.0.1312 on win7 x64 and it works as is, try updating to the latest version of the browser.

Related

HTML5 Canvas Very Long Line Is Cutted In Other Browser

I have these specific codes in html but the problem is the line I draw is cutted in firefox and internet explorer.
Here is my sample html.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
c.setAttribute("width", "10000");
var ctx = c.getContext("2d");
ctx.moveTo(1,10);
ctx.lineTo(10000,10);
ctx.stroke();
</script>
</body>
</html>

Animate({right: 0}) not working properly in Chrome and Opera

I try to have an image slide from left to right using only jQuery and it works perfectly with .animate({right: 0}, 1500) on Firefox but not on Chrome and Opera (haven't tried other browsers though).
Here is a code example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Slide this squirrel</title>
</head>
<body>
<div style="position:relative;margin:1%;padding:1%;border:1px solid black">
<img id="squirrel" src="squirrel.jpg" alt="What a squirrel..." style="position:absolute;" />
</div>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function() {
$("#squirrel").animate({right: 0}, 5000);
});
</script>
</body>
</html>
You need to assign 100% to the right property for #squirrel in the CSS file.
HTML:
<div style="position:relative;margin:1%;padding:1%;border:1px solid black">
<img id="squirrel" src="http://sweetclipart.com/multisite/sweetclipart/files/imagecache/middle/squirrel_2_line_art.png" height="80" width="100" style="position:absolute;" />
</div>
JS:
$(document).ready(function() {
$("#squirrel").animate({right: 0}, 5000);
});
CSS:
#squirrel{
right:100%;
}
I created an JSFiddle for you.
URL: http://jsfiddle.net/m99bybnp/
EDIT:
I made a small change in the JS file.
$(document).ready(function() {
// We calculate the width which we need for the wanted displacement
var width_Animate = $('#container_Squirrel').width() - $('#squirrel').width() ;
$("#squirrel").animate({left: width_Animate}, 5000);
});
New JSFiddle URL: http://jsfiddle.net/m99bybnp/2/

To fade only a part of a image in html

I have an image and I want to fade the central circular portion of the image to be shown clear and the rest of the portion to be faded.
I tried with canvas as well as by taking two divs and making one of them fade,
but not working.
Following is the pattern i need, with the area out of the circle to be faded. Please Help!!
Here's a starting point for you to get an image that's clear center and fade-to-color outside:
position 2 canvases -- one on top of the other
draw the image on the bottom canvas
fill the top canvas with your color (blue,etc)
use a combination of scaling, shadowing and compositing to "reveal" the image underneath
Demo: http://jsfiddle.net/m1erickson/HtL4P/
Example code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{position:absolute;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvas1=document.getElementById("canvas1");
var ctx1=canvas1.getContext("2d");
var img=new Image();img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/landscape2.jpg";
function start(){
canvas.width=canvas1.width=img.width/3;
canvas.height=canvas1.height=img.height/3;
ctx.drawImage(img,0,0,img.width,img.height,0,0,img.width/3,img.height/3);
ctx1.fillStyle="dodgerblue";
ctx1.fillRect(0,0,canvas1.width,canvas1.height);
ctx1.save();
ctx1.scale(3,1);
ctx1.globalCompositeOperation="destination-out";
ctx1.arc(-100,120,40,0,Math.PI*2);
ctx1.shadowColor="white";
ctx1.shadowBlur=60;
ctx1.shadowOffsetX=500;
ctx1.fill();
ctx1.restore();
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=356 height=237></canvas>
<canvas id="canvas1" width=356 height=237></canvas>
</body>
</html>

What is the relation between the size and resolution of HTML5 canvas

Is there a way by which I can create a canvas of large size but low resolution. I'm declaring the canvas with the syntax <canvas id="mycanvas" width="700" height="1000"></canvas>. I'm running the above code on a 7 inch tablet and the canvas spans half of the screen of the canvas. Is there a way by which I can create a canvas which again covers half of the screen but has a lower resolution (lower quality of image).
Actually I draw something on the canvas and then save it as image by using canvas.toDataURL(). I don't need to get good quality image, but I want to lower the size of the image generated.
Forgive me if it's a silly question
First, scale your canvas element like this (in javascript):
canvas.width=canvas1.width*scaleFactor;
canvas.height=canvas1.height*scaleFactor;
Warning: If you scale the canvas using CSS, you will likely distort images drawn on the canvas
Then you can scale your image using some added arguments to context.drawImage
var scaleFactor=0.50;
ctx2.drawImage(img, 0,0,img.width,img.height,
0,0,img.width*scaleFactor,img.height*scaleFactor);
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/6m8kg/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; padding:15px;}
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas1=document.getElementById("canvas1");
var ctx1=canvas1.getContext("2d");
var canvas2=document.getElementById("canvas2");
var ctx2=canvas2.getContext("2d");
var scaleFactor=0.50;
var img=document.createElement("img");
img.onload=function(){
// draw the image full-size on the larger canvas
ctx1.drawImage(img,0,0);
// resize the canvas
// Don't use css to resize, it will distort your image
// The scaling is done with the added drawImage arguements
canvas2.width=canvas1.width*scaleFactor;
canvas2.height=canvas1.height*scaleFactor;
// draw a scaled-down image into the second canvas
ctx2.drawImage(img, 0,0,img.width,img.height,
0,0,img.width*scaleFactor,img.height*scaleFactor);
}
img.src="faces.png";
}); // end $(function(){});
</script>
</head>
<body>
<p>Top canvas is full-sized</p>
<canvas id="canvas1" width=400 height=242></canvas><br>
<p>Bottom canvas is scaled down</p>
<canvas id="canvas2" width=300 height=300></canvas>
</body>
</html>

save functionality on a webpage that will present clicked xy points as text?

How do I add a functionality on a webpage that will present clicked xy points as text which can be then be copy and pasted?
I assume since you wrote “save functionality” tagged “canvas” that you want to:
Have the user to click points,
Show those points as copyable text.
Then you will use json to save that text somewhere.
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/xDj3L/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<!--[if lt IE 9]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
<style>
body{ background-color: ivory; padding:10px;}
canvas{border:1px solid red; float:left;}
#container{width:410px;}
#log{ width:100px; height:300px; float:right;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvasMouseX;
var canvasMouseY;
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var storedPoints=[];
ctx.strokeStyle="orange";
ctx.font = '12px Arial';
$("#canvas").mousedown(function(e){handleMouseDown(e);});
function handleMouseDown(e){
canvasMouseX=parseInt(e.clientX-offsetX);
canvasMouseY=parseInt(e.clientY-offsetY);
// Put your mousedown stuff here
storedPoints.push({x:canvasMouseX,y:canvasMouseY});
var count=storedPoints.length;
var X=canvasMouseX-(count<10?4:7);
ctx.strokeStyle="orange";
ctx.fillStyle="black";
ctx.lineWidth=1;
ctx.beginPath();
ctx.arc(canvasMouseX, canvasMouseY, 8, 0 , 2 * Math.PI, false);
ctx.fillText(storedPoints.length, X, canvasMouseY+4);
ctx.stroke();
$("#log").html(toHtml());
}
function toHtml(){
htmlPoints="";
for(var i=0;i<storedPoints.length;i++){
htmlPoints+="<p>"+storedPoints[i].x+","+storedPoints[i].y+"</p>"
}
return(htmlPoints);
}
$("#clear").click(function(){
ctx.clearRect(0,0,canvas.width,canvas.height);
storedPoints=[];
$("#log").html(toHtml());
});
}); // end $(function(){});
</script>
</head>
<body>
<br/><p>Click on canvas to create points as text</p><br/>
<button id="clear">Clear Canvas</button>
<div id="container">
<canvas id="canvas" width=300 height=300></canvas>
<div id="log"></div>
</div>
</body>
</html>