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
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>
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/
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>
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>
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>