Ok i have been trying this all morning but to no avail.
I am having a slider element whose slide area is about 420px in height.I am having a canvas element whose height is 400px and width is 215 px as below:
<div class="maincontent"><!--
<div class="table"><!--
<div class=""></div><!--
<div id="distanceSliderContainer">
<div id="distanceSliderHolderArea">
<div id="distanceSliderDrag">
<div id="sliderBar" class="distanceSlider-bar"> </div>
<div id="slidertext" class="distanceSlider-text">24</div>
</div>
</div>
</div>
<canvas id="myCanvas" class="canvas-bg"></canvas><!--
<div id="amplitudeSliderContainer">
<div id="amplitudeSliderHolderArea">
<div id="amplitudeSliderDrag">
<div id="amplitudeSliderbar" class="amplitudeSlider-bar"> </div>
<div id="amplitudeSlidertext" class="amplitudeSlider-text">24</div>
</div>
</div>
</div>
</div><!--
</div><!--
Now what i want to do is map canvas's one pixel to pixel returned by css attribute top,so that i can dynamically draw a line from a standalone point to the point as the slider slides,till now i am able to get the line but its lagging behind the slider. So my question is how can i map the one pixel of canvas to one pixel returned by slider's top attribute so that the line is drawn consistently with the slider,below is my code for drawing line:
var globalObject;
function CanvasLinePainter(){
globalObject=this;
this.y=136
this.rotate=0.03;
this.previousOffsetTop=356;
this.canvas = document.getElementById('myCanvas');
this.context = this.canvas.getContext('2d');
this.context.beginPath();
this.context.moveTo(75,136);
this.context.lineTo(220,136) ;
this.context.lineWidth = 1.5;
this.offsetPixelCount=0;
this.tempFifteen=0;
this.context.strokeStyle = '#00FF00';
this.context.stroke();
$("#clickMe").on("click",this.getCordinates);
}
CanvasLinePainter.prototype.drawLineForDistance=function(offsetTop){
this.context.beginPath();
if(offsetTop){
if(offsetTop<this.previousOffsetTop){
this.offsetPixelCount++;
console.log("current offsetTop:"+offsetTop);
console.log("previous offsetTop:"+this.previousOffsetTop);
this.previousOffsetTop=offsetTop;
console.log("new previous offsetTop"+this.previousOffsetTop);
if(this.offsetPixelCount==3){
this.offsetPixelCount=0;
if(offsetTop){
this.context.canvas.width =globalObject.context.canvas.width;
this.context.rotate(0.03);
this.context.moveTo(75,this.y--)
console.log("new this.y--->"+this.y);
this.context.lineTo(220,136)
}
}
}
}
this.context.lineWidth = 1.5;
globalObject.context.strokeStyle = '#00FF00';
globalObject.context.stroke();
}
From my calculation i am able to get that if slider moves three pixels up i have to decrement the y co-ordinate by single pixel so the line shifts up,but the problem is that if i move the slider fast the line lags behind. The above line drawing code gets called when my slider moves.
P.S. i have used draggable as my slider and not jquery ui's slider element