CODEWITHSUNDEEP
javascriptdomcanvasattributeshtml5-canvas
moamen
moamen

Reputation: 191

I want to draw a circle at the middle of the viewed canvas when user clicks Ctrl

I have the following html:

<div id="outliner">


<div id="main_track" style="width:901px;margin: auto;overflow-x: scroll;overflow-y: hidden;position: relative;  height: 150px; " >
                <canvas style="height:50px;width:1901px;" id='timeLine'></canvas>
            
            </div> 
      </div>

There is a vertical red line at the middle of main_track element made by styling #outliner:after. Now I want to draw a small circle exactly at that line when the user clicks Ctrl, so I made the following javascript:

var stillDown=false;
window.onkeydown=function(event){
    if (event.keyCode==17 && !stillDown){
        console.log("key DOWN!");
            stillDown=true;
                var context = document.getElementById('timeLine').getContext('2d');
                const place=document.getElementById("main_track").scrollLeft;
                context.beginPath();
                context.arc(place+450, 25, 3, 0, 2 * Math.PI, false);
                context.strokeStyle = '#000000';
                context.fillStyle = '#ff0000';
                context.lineWidth = 2;
                context.fill();
                context.stroke();
                
        }
    
}
window.onkeyup=function(event){
    
    if (event.keyCode==17 && stillDown){
        

            console.log("key UP!");
            stillDown=false;                
        }

When I click Ctrl for testing I see "Key DOWN!" and "Key UP!" in the console, but no drawing appears. I see no errors in the console. How can I fix that? Here is the code on jsfiddle.

Upvotes: 0

Views: 29

Answers (1)

Ori Price
Ori Price

Reputation: 4231

You should set canvas size as canvas html width and height tag attributes as follows:

<canvas width="1901" height="50" id='timeLine'></canvas>

style attributes of width/height have different meaning in <canvas>

Working JsFiddle

You can read more info of the different meaning here: Stackoverflow answer

Upvotes: 1

Related Questions