JavaScript Canvas crosshair at center

Question

How can I put a canvas crosshair at the center of my canvas.

<canvas id="imageView" width="1400" height="788"></canvas>

The crosshair shall be a drawn one not an image.

Answer 1

Here you go:

 var c =document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var x = c.width / 2; var y = c.height / 2; var ctx2=c.getContext("2d"); ctx.moveTo(x, y - 10); ctx.lineTo(x, y + 10); ctx.moveTo(x - 10, y); ctx.lineTo(x + 10, y); // Line color ctx.strokeStyle = '#DB14C1'; ctx.stroke(); 

 <canvas id='myCanvas'></canvas> 

Answer 2

Since you requested centering the crosshair, here's a more thorough example, which also includes a technique for anti-aliasing:

 var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); // center var x = canvas.width / 2; var y = canvas.height / 2; // remove aliasing x = Math.floor(x) + 0.5; y = Math.floor(y) + 0.5; context.strokeWidth = 1; context.moveTo(x, y - 10); context.lineTo(x, y + 10); context.moveTo(x - 10, y); context.lineTo(x + 10, y); // Line color context.strokeStyle = 'green'; context.stroke(); 

 canvas { border: 1px solid #000; } 

 <canvas id="myCanvas" width="300" height="200"></canvas> 

Update

If you want to test different sizes and colors, here's a little playground:

 var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var width = document.querySelector('#width'); var height = document.querySelector('#height'); var strokeWidth = document.querySelector('#strokeWidth'); var crossHairLength = document.querySelector('#crossHairLength'); var color = document.querySelector('#color'); var widthValue = document.querySelector('#widthValue'); var heightValue = document.querySelector('#heightValue'); var strokeWidthValue = document.querySelector('#strokeWidthValue'); var crossHairLengthValue = document.querySelector('#crossHairLengthValue'); var colorValue = document.querySelector('#colorValue'); function redraw() { widthValue.textContent = width.value + 'px'; heightValue.textContent = height.value + 'px'; strokeWidthValue.textContent = strokeWidth.value + 'px'; crossHairLengthValue.textContent = crossHairLength.value + 'px'; colorValue.textContent = color.value; // dimensions canvas.width = width.value; canvas.height = height.value; // stroke parameters context.lineWidth = strokeWidth.value; context.strokeStyle = color.value; // center var x = canvas.width / 2; var y = canvas.height / 2; // remove aliasing x = Math.round(x) + (context.lineWidth / 2) % 1; y = Math.round(y) + (context.lineWidth / 2) % 1; var length = +crossHairLength.value; context.moveTo(x, y - length); context.lineTo(x, y + length); context.moveTo(x - length, y); context.lineTo(x + length, y); context.stroke(); } document.addEventListener('input', redraw); redraw(); 

 canvas { border: 1px solid #000000; } 

 <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"> <form class="pure-form pure-form-aligned"> <fieldset> <div class="pure-control-group"> <label for="width">Width</label> <input id="width" name="width" type="range" min="75" max="500" value="200"> <span id="widthValue" class="pure-form-message-inline"></span> </div> <div class="pure-control-group"> <label for="height">Height</label> <input id="height" name="height" type="range" min="75" max="500" value="200"> <span id="heightValue" class="pure-form-message-inline"></span> </div> <div class="pure-control-group"> <label for="strokeWidth">Stroke Width</label> <input id="strokeWidth" name="strokeWidth" type="range" min="1" max="10" value="1"> <span id="strokeWidthValue" class="pure-form-message-inline"></span> </div> <div class="pure-control-group"> <label for="crossHairLength">Crosshair Length</label> <input id="crossHairLength" name="crossHairLength" type="range" min="5" max="25" value="15"> <span id="crossHairLengthValue" class="pure-form-message-inline"></span> </div> <div class="pure-control-group"> <label for="color">Color</label> <input id="color" name="color" type="color" value="#000000"> <span id="colorValue" class="pure-form-message-inline"></span> </div> <div class="pure-controls"> <canvas id="myCanvas" width="200" height="200"></canvas> </div> </fieldset> </form>