I am trying to draw on a html5 canvas and the following code should give me a diagonal line from left top to right bottom. However I do not get the expected result. is there any transformation required to the context ?
HTML
<canvas id="myCanvas" style="margin-left:auto; margin-right:
auto;width:700px;height:100px;border:1px solid grey">
</canvas>
JS
var canvas = $("#myCanvas");
var pen = canvas[0].getContext("2d");
pen.strokeStyle = "#000000"; pen.lineWidth = "2";
pen.beginPath(); pen.moveTo(700, 100); pen.lineTo(0,0);
pen.stroke();
http://jsfiddle.net/neilghosh/DvjAP/2/
jsFiddle demo
Strange but true. The Canvas element W/H have (not only*) to be set inline like:
<canvas id="myCanvas" width="700" height="100"></canvas>
Put the rest in your CSS stylesheet:
#myCanvas{
margin-left:auto;
margin-right: auto;
border:1px solid grey
}
For a better understanding:
Canvas element W/H values are: 300x150 by default, but if you change that values in your stylesheet that will actually stretch your canvas renderings like it would do for any other image.
Another way to change your W/H is with JS like:
canvas[0].width = 700;
canvas[0].height = 100;
Demo
Related
I am trying to display a canvas with an image drawn in it (especially to prevent downloading the image by chrome mobile users). When i am setting the canvas.style.height to img.offsetHeight and canvas.style.width to img.offsetwidth (here img=document.getElementById("img-element")) its just showing a small black square, as if its height and width are 0.
Here is the code:
window.onload=function(){
var c = document.getElementById("c");
var ctx = c.getContext("2d");
var img=document.getElementById("img");
ctx.drawImage(img, 1, 1);
c.style.height=(img.offsetHeight);
c.style.width=(img.offsetWidth);
}
<img src="Icon.png" id="img" style="display:none">
<canvas id="c" style="border:2px solid #001100" oncontextmenu="return false;">
lol ur potato pc doesn't support canvas!!!
</canvas>
<script src="script.js"></script>
output:
Here is how I would write it. First instead of using style on the canvas width and height just set it as c.width and c.height. I would also set those before drawing the image. Also give the image a width and height and use visibility instead of display. This means you have to set the position to absolute to remove it from the html flow.
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/79/mask-icons-whirl.jpg" id="img">
<canvas id="c" style="border:2px solid #001100" oncontextmenu="return false;">
lol ur potato pc doesn't support canvas!!!
</canvas>
#img {
position: absolute;
width: 200px;
height: 200px;
visibility: hidden;
}
window.onload=function(){
var c = document.getElementById("c");
var ctx = c.getContext("2d");
var img=document.getElementById("img");
c.height = img.getBoundingClientRect().height;
c.width = img.getBoundingClientRect().width;
ctx.drawImage(img, 1, 1);
}
I have a div which holds an image. The image itself is loaded in later :
HTML :
<div id="image_holder" class='hide'>
<img id="image" onload="createStimuli() " >
<canvas id="canvasOverImage" class="coveringCanvas" ></canvas>
</div>
coveringCanvas style :
CSS:
.coveringCanvas {
position:relative;
z-index:2
}
Next, when the time is right I load in the image.
document.getElementById('image').src = `imagesource`;
Because now the image is loaded, it triggers createStimuli():
function createStimuli() {
var image = $('#image');
var canvas = $('#canvasOverImage');
canvas.css({top:`-${image.height()}px`}); // set style via css
canvas.attr({ "height":image.height(), "width" :image.width()}); // set attr in html
}
This code places the canvas exactly on top of the image (as intended) But it appears that before the position is changed to be on top, it is placed below or next to the image, stretching the canvas.
As a result, even though the canvas is on the image, the creation of the canvas stretches the div leaving empty space below/next to the div.
Is there a way to counter this? Or should i just resize the div after creating the canvas?
To work around this issue :
First set your image_holder div's position to relative . to make sure all absolute positionned elemnt will be positioning to this last .
Then make canvas position to absolute and left postion to 0
#canvasOverImage {
position:absolute;
}
You can test below snippet i've added some borders to canva to see result
document.getElementById('image').src = "https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg";
function createStimuli() {
var image = $('#image');
var canvas = $('#canvasOverImage');
//canvas.css({top:-(image.height()+5)+'px'}); // set style via css
canvas.attr({ "height":image.height(),"width" :image.width()});
}
#image_holder {
position:relative;
}
#canvasOverImage {
border:1px solid red;
position:absolute;
}
#canvasOverImage {
left:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image_holder" class='hide'>
<img id="image" onload="createStimuli() " ><!--
--><canvas id="canvasOverImage" class="coveringCanvas" ></canvas>
</div>
Note that i've just remove 5 px to fit exactely image and remove extra space between image and canvas
You could accomplish such thing in a more efficient manner by doing it using the following way ...
document.getElementById('image').src = "https://s-media-cache-ak0.pinimg.com/736x/52/30/66/523066972863437c1a5daa774d1e5414.jpg";
function createStimuli(e) {
var canvas = $('#canvasOverImage')[0];
// set canvas css style
canvas.style.marginLeft = -(e.width + 3) + 'px'; // 3 ~ border width
// set canvas attr in html
canvas.width = e.width;
canvas.height = e.height;
// draw text on canvas *proves canvas is on top*
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'black';
ctx.font = 'bold 18px Arial';
ctx.fillText('hello', 10, 25);
}
.coveringCanvas {
border: 3px solid black;
}
.hide {
display: flex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image_holder" class='hide'>
<img id="image" onload="createStimuli(this)">
<canvas id="canvasOverImage" class="coveringCanvas"></canvas>
</div>
i am working on an app that types text on to the image..so i dont want the text to go out of the image.
here is my code:
style
#container{
overflow: hidden;
z-index: 0;
}
#myCanvas{
z-index: 1000;
border: 2px solid red;
width: 100%;
}
html code
<div id="container">
<canvas id="myCanvas"></canvas>
</div>
script
$(document).ready(function(){
var context2= $("#myCanvas")[0].getContext('2d');
$("#myCanvas,#container").height((3*window.innerWidth)/4);
context2.fillStyle = "#0000ff";
context2.fillRect(0,0,context2.canvas.width,context2.canvas.height);
$("#toptext").on("keyup",function(){
//save blue style of fill rectangle
context2.save();
var topTxt=$(this).val();
//clear the rectangle
context2.clearRect (0,0,context2.canvas.width,context2.canvas.height);
//draw the canvas again to get fresh frame
context2.fillRect(0,0,context2.canvas.width,context2.canvas.height);
//change fill style to white
context2.fillStyle = "#ffffff";
var maxWidth=50;
context2.font="bold 25px verdana";
context2.fillText(topTxt,50,50,100,100,**maxWidth**);
//
context2.restore();
});
});
notice max width is set. so the text should not go out of the width provided
It works fine in the browser but as soon as u convert it to a phonegap app the width is no longer applied and text goes out out the image:
see the app here:
https://build.phonegap.com/apps/1171739/download/android/?qr_key=JrAyvaQENkAkowwmdDjC
here is my git:
https://github.com/prantikv/image-typer/tree/gitless
i have checked it after removing jquery mobile and i have the same issue...so the problem is either with android or phoneGAP...
How to get around it
I think you are using the fillText wrong because it is defined as follows:
void fillText(
in DOMString textToDraw,
in float x,
in float y,
[optional] in float maxWidth
);
and you are calling it with: context2.fillText(topTxt,50/*x*/,50/*y*/,100/*max-width*/,100,**maxWidth**);
So the last two aren't actually used.
See definition here: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text#fillText()
Need help, when i apply border radius to imgae via css, it is not rendering properly, rendered image should be same preview image. I used html2canvas to convert div to image.
Attached image for reference, first one is normal preview with border-radius and 2nd one without border-radius.
<div id="mydiv">
<img src="1.jpg" />
<p>text!</p>
</div>
<p>Generated image</p>
<div id="image">
<p>Image:</p>
</div>
CSS
<style>
#mydiv {
width: 300px;
height: 200px;
background:#000;
}
#mydiv img {
width: 200px;
height: 200px;
border-radius:100%;
}
</style>
js
html2canvas([document.getElementById('mydiv')], {
onrendered: function (canvas) {
//document.getElementById('canvas').appendChild(canvas);
var data = canvas.toDataURL('image/png');
// AJAX call to send `data` to a PHP file that creates an image from the dataURI string and saves it to a directory on the server
var image = new Image();
image.src = data;
document.getElementById('image').appendChild(image);
}
});
This is an unresolved bug (the issue has been reported):
http://github.com/niklasvh/html2canvas/issues/346
You can use the clipping capability of canvas as a workaround.
A Demo: http://jsfiddle.net/m1erickson/8wL2q/
Example code using a clipping area instead of border radius:
// save the context in its unaltered state
ctx.save();
// fill canvas with black
ctx.fillStyle="black";
ctx.fillRect(0,0,canvas.width,canvas.height);
// create clipping region which will display portion of image
// The image will only be visible inside the circular clipping path
ctx.beginPath();
ctx.arc(100,100,100,0,Math.PI*2);
ctx.closePath();
ctx.clip();
// draw the image into the clipping region
ctx.drawImage(img,0,0);
// restore the context to its unaltered state
ctx.restore();
use border: solid windowtext 1.0pt;instead of border:1px solid #fff;in css
I am trying to crop an image from an url and then stretch the cropped image to the available space.
<div style="width:300px; height:400px;">
<img style="width:100%; height:100%;" src="http://www.gravatar.com/avatar/eb95aa803f8c6d536afc87bf8d641ed4?s=128&d=identicon&r=PG" />
</div>
This will stretch the image appropriately, but I do not know how to crop it. I have tried to use clip:rect(0px,60px,200px,0px); but the image will stretch to the available space first and then apply the clip, so it doesn't work for me.
Edit - jsfiddle: http://jsfiddle.net/bjMp6/
For example, I want to try and just crop the head and then stretch the head
Working off of Yoshi's idea without the second div
div
{
width:300px;
height:400px;
border:1px solid #333;
overflow:hidden;
position:relative;
}
img
{
width:300%;
height:300%;
position:absolute;
top:0;
left:-50%;
}
Added the border just to see the containing div. This way you will not need to know the dims of the container but for cropping an image you will have to play with the number with any solution unless all of the images have the same relative composition ie headshots or something similar.
Here's a fiddle for your viewing pleasure.
Also as the container grows/shrinks your image will retain the same crop and position.
I made a fiddle to illustrate the canvas solution :
http://jsfiddle.net/dystroy/mDy24/
Here's the html :
<div id=theimg style="width:300px; height:400px;">
<canvas id=thecanvas style="width:100%;height:100%;">
</div>
And the js :
var img = new Image();
img.src = "http://www.gravatar.com/avatar/eb95aa803f8c6d536afc87bf8d641ed4?s=128&d=identicon&r=PG";
img.onload = function() {
var can = document.getElementById('thecanvas');
var con = can.getContext("2d");
console.log(con);
con.drawImage(img, 0, 0, 50, 50, 0, 0, can.width, can.height);
}