Develop Reference

Raphael getElementByPoint gives null (jsfiddle)

I have a multilayer canvas
My html:
<div style='display:inline-block; width:100%; position:relative; top: 0px; left: 0px;'>
<div id='canvas_map_1' class='canvas canvas_map' style='overflow:scroll; background-color: #B4B4B4; z-index: 1; position:absolute; left:133px; top:0px;'></div>
<div id='canvas_map_2' class='canvas canvas_map' style='overflow:scroll; z-index: 2; position:absolute; left:133px; top:0px;'></div>
...
</div>
Given a set of coordinates I want to know if there are some images under it. I'm using Raphael and I want to try the getElementByPoint function (as alternative I could snap the coordinates to a grid and iterate all the images of the canvas to see if some have the same application point (top left corner) and it works but I thinks that will be slow, so I'm looking for faster solutions).
My javascript:
var paper_map_1 = Raphael(canvas_map_1, '100%', '100%');
var image = paper_map_1.image(image_selected, 27, 42, 33, 27);
var myimage = paper_map_1.getElementByPoint(30, 50) // or (27, 42) but shouldn't do difference
console.log(myimage) // null
myimage is null while I expected something because there is an image in that position on that canvas. I can select it, move it, etc. Off course the code is much simplified but I don't know what to add.
jsfiddle

JS canvas stretching div unintentionally

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>

html2canvas border radius not applying to img tag

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

How to color an image based on a dynamically changing percentage value?

I have an image which i want to fill with some color based on a dynamically changing value that represents percentage, e.g. if the value is 50% half of the image should be colored.
How to achieve that using JavaScript (jQuery can be used)?

You can accomplish that by utilizing the clip CSS property, and a little bit of added markup to serve an underlaying container for the unrevealing background color.
Abstract
Place an element underneath the image for the faux color fill, and set its dimensions and position to match the images'. Then use JavaScript to clip the image dynamically - thus revealing the underlying color - by altering the clip value of the image element according to your needs (you can, of course, control each offset separately, e.g. left, bottom).
Note: To achieve specifically what you desire you can alter the underlying element to contain another image that suits your needs (i.e. a top image of an empty barrel, and a bottom image of a full one).
Implementation
In this example a slider is used to trigger the value change.
Markup
<input type="range" min="0" max="100" id="slider" value="100" />
<div id="underlay"></div>
<img src="http://placekitten.com/500/207" id="image" />
Styles
#slider,
#image,
#underlay {
/* absolute positioning is mandatory for clipped elements (#image) */
position: absolute;
left: 50px;
width: 500px;
}
#image,
#underlay {
top: 100px;
height: 207px;
}
#image {
/* initial clip state */
clip: rect(auto, auto, auto, 500px);
}
#slider {
top: 50px;
}
#underlay {
background-color: #4C76A5;
}
Functionality
var img = document.getElementById('image');
var sld = document.getElementById('slider');
sld.addEventListener('change', function(e) {
// get the slider value
var val = e.srcElement.value;
// calc the percentage to pass an absolute length value to the clip property
var perc = img.width / 100 * val;
// set the images' left offset clip accordingly
img.style.clip = 'rect(auto, auto, auto, ' + perc + 'px)';
});
Live Demo
On jsFiddle
References
clip on Mozilla Developer Network
Browser support

canvas context coordinates are inconsitent

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