Canvas elements cut off at the - javascript

When I place a square on the canvas at 0,0 coords the top left is cut off:
var canvas = document.getElementById('c');
var context = canvas.getContext('2d');
context.strokeStyle = 'blue';
context.rect(0, 0, 200, 100);
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();
<canvas id="c" width="500" height="500"></canvas>
Why is this?

It's because half the stroke is inside the rect.fill and the other half of the stroke is outside the rect.fill.
Kind of like css borders, you must account for them when sizing/positioning.
In canvas's case, the stroke is always half-in / half-out the object.

Related

canvas resolution not good

i am trying to draw a canvas line on div id "myCanvas" but problem is the line becomes very low resolution and its not shows smooth line. How can i increase that line resolution? And make it smooth line?
js:
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.rect(0, 0, canvas.width, canvas.height);
var grd = context.createLinearGradient(100, 150, canvas.width, canvas.height);
grd.addColorStop(0, '#0132bf');
grd.addColorStop(1, '#ccd9ff');
context.fillStyle = grd;
context.fill();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.lineTo(-10, 190);
context.bezierCurveTo(200, -100, 500, 200, 400, 150);
context.lineWidth = .9;
context.strokeStyle = '#ccd9ff';
context.stroke();
jsfiddle link
Try giving your canvas HTML element width and height attributes that fit your requirements, for example:
<canvas id="myCanvas" width="600" height="600">

How to rotate a rectangle in Javascript

Hi guys, I am working on an assignment where I need to draw an image of an emoticon face.
function sadFace() {
//Drawing the sad face
context.beginPath();
context.fillStyle = "rgb(255,255,0)" //Drawing the face in yellow colour
context.lineWidth = 3;
context.arc(300,300,200,0,Math.PI*4,true);
context.fill();
context.stroke();
//Left Eyebrow
context.beginPath();
context.fillStyle = "rgb(0,0,0)";
context.rect(170,180,90,15);
context.fill();
context.stroke();
This is my current code. How can I rotate the 'eyebrow' of the image firstly, and also rotate the eyebrow without rotating the whole image? Thanks!
You can use affine transformation, like rotation, translation, scale.
First save the current context
context.save()
Set rotation and translation see document
Restore the state
context.restore()
const canvas = document.getElementById("canvas")
const context = canvas.getContext("2d");
context.beginPath();
context.fillStyle = "rgb(255,255,0)" //Drawing the face in yellow colour
context.lineWidth = 3;
context.arc(300,300,200,0,Math.PI*4,true);
context.fill();
context.stroke();
//Left Eyebrow
context.save();
context.translate(210, 188);
context.rotate(30 * Math.PI / 180);
context.beginPath();
context.fillStyle = "rgb(0,0,0)";
context.rect(-45,-8,90,15);
context.fill();
context.stroke();
context.restore();
context.save();
context.translate(380, 188);
context.rotate(-30 * Math.PI / 180);
context.beginPath();
context.fillStyle = "rgb(0,0,0)";
context.rect(-45,-8,90,15);
context.fill();
context.stroke();
context.restore();
<canvas id="canvas" width="500" height="500" />
Explanation:
Since rotating is rotate around the coordinator (O (0, 0), we need to translate first to the position we want to draw:
context.translate(eyeBrowX, eyeBrowY); // eyebrow position here
Then do a rotation:
context.rotate(angleInRadian);
Then draw the rectangle so that the center of the rectangle is O (0, 0) - then it would rotate around its center.
context.beginPath();
context.fillStyle = "rgb(0,0,0)";
context.rect(-width / 2, -height / 2, width, height);
context.fill();
context.stroke();
You don't have to rotate anything. Instead of creating rect just use lines to draw the eyebrows. Tell the line to go get drawn in a diagonal path like this
let canvas = document.getElementById("myCanvas");
let context = canvas.getContext("2d");
context.beginPath();
context.fillStyle = "rgb(255,255,0)" //Drawing the face in yellow colour
context.lineWidth = 3;
context.arc(300,300,200,0,Math.PI*4,true);
context.fill();
context.stroke();
//Left Eyebrow
context.beginPath();
context.moveTo(170,180);
context.lineTo(260,195);
context.lineWidth = 10
context.fillStyle = "rgb(0,0,0)";
context.fill();
context.stroke();
<canvas id="myCanvas" width="800" height="800"></canvas>
In this way you don't need to save the context. By the way the canvas does not allow you to change things individually. You need to clear and redraw. (that how it works for animations for example). If you want more control, and modify things individually you need a rendering library like Pixi.js

How to create html5 canvas for bordered boxes?

I am trying to create below canvas.
Image
my code is below. but I am having trouble to make the canvas look the like the screenshot above. can anyone help me then?
thanks though
<html>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<script>
var canvas;
var canvasContext;
window.onload = function() {
canvas = document.getElementById('gameCanvas');
canvasContext = canvas.getContext('2d');
canvasContext.fillStyle = 'blue';
canvasContext.fillRect(0,0,canvas.width,canvas.height);
canvasContext.fillStyle = 'grey';
canvasContext.fillRect(355,350,120,90);
canvasContext.fillStyle = 'grey';
canvasContext.fillRect(190,350,120,90);
canvasContext.fillStyle = 'grey';
canvasContext.fillRect(520,350,120,90);
canvasContext.fillStyle = 'grey';
canvasContext.fillRect(355,200,120,90);
canvasContext.fillStyle = 'grey';
canvasContext.fillRect(190,200,120,90);
canvasContext.fillStyle = 'grey';
canvasContext.fillRect(520,200,120,90);
}
</script>
</html>
.fillRect creates a filled region of color. However, .rect creates a "shape" that you can then use the .fill() and .stroke() methods upon.
In the below example if converted creation into a loop for brevity
var canvas;
var canvasContext;
window.onload = function() {
canvas = document.getElementById('gameCanvas');
canvasContext = canvas.getContext('2d');
canvasContext.fillStyle = 'blue';
canvasContext.fillRect(0,0,canvas.width,canvas.height);
var height = 90;
var width = 120;
var leftOffset = 190;
var topOffset = 200;
for(var x = 0; x < 6; x++){
canvasContext.beginPath();
canvasContext.rect(leftOffset,topOffset,width,height);
canvasContext.fillStyle = 'grey';
canvasContext.fill();
canvasContext.lineWidth = 4;
canvasContext.strokeStyle = 'lightblue';
canvasContext.stroke();
leftOffset += 165;
if(x === 2){
leftOffset = 190;
topOffset = 350;
}
}
}
JSFIDDLE
This tutorial on HTML5 Canvas rectangles is very handy
To add the text, you would append the following after (or before) the rect creating loop
canvasContext.beginPath();
canvasContext.font = '20pt Arial';
canvasContext.textAlign = 'center';
canvasContext.fillStyle = 'white';
canvasContext.shadowColor = 'black';
canvasContext.shadowOffsetX = 4;
canvasContext.shadowOffsetY = 4;
canvasContext.fillText('CHOOSE A SCENE TO COLOR', canvas.width/2,55);
UPDATED FIDDLE
Tutorials for text align, text shadow, and text.
Try something like this, use a function to draw a rectangle with exactly the border you want. The trick is to use .rect instead of fillRect so that you can use .stroke() immediately after.
<html>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<script>
function draw_bordered_rect(context, x, y, w, h) {
context.rect(x, y, w, h);
context.fillStyle = "grey";
context.fill();
context.lineWidth = 3;
context.strokeStyle = "lightblue";
context.stroke();
}
window.onload = function() {
canvas = document.getElementById('gameCanvas');
canvasContext = canvas.getContext('2d');
canvasContext.fillStyle = 'blue';
canvasContext.fillRect(0, 0, canvas.width, canvas.height);
canvasContext.font = '25pt Arial';
canvasContext.textAlign = 'center';
//drop shadow 2px to the left and 2px below the white text
canvasContext.fillStyle = "black";
canvasContext.fillText('CHOOSE A SCENE TO COLOR', canvas.width/2-2, 82);
//actual text ontop of the drop shadow text
canvasContext.fillStyle = 'white';
canvasContext.fillText('CHOOSE A SCENE TO COLOR', canvas.width/2, 80);
draw_bordered_rect(canvasContext, 355, 350, 120, 90);
draw_bordered_rect(canvasContext, 190, 350, 120, 90);
draw_bordered_rect(canvasContext, 520, 350, 120, 90);
draw_bordered_rect(canvasContext, 355, 200, 120, 90);
draw_bordered_rect(canvasContext, 190, 200, 120, 90);
draw_bordered_rect(canvasContext, 520, 200, 120, 90);
}
</script>
</html>
Looks like:
I have some code to design canvas box in HTML5. I think you should try this one, I hope it will help you to design your canvas box. I think you should use JavaScript mehtod context.fillRect as i am giving you Js Fidler Lind here
HTML Code
<canvas id="myCanvas" width="500" height="400">
<!-- Insert fallback content here -->
</canvas>
JavaScript Code
var canvas = $("#myCanvas");
var context = canvas.get(0).getContext("2d");
// Set rectangle and corner values
var rectX = 50;
var rectY = 50;
var rectWidth = 100;
var rectHeight = 100;
var cornerRadius = 20;
// Reference rectangle without rounding, for size comparison
context.fillRect(200, 50, rectWidth, rectHeight);
// Set faux rounded corners
context.lineJoin = "round";
context.lineWidth = cornerRadius;
// Change origin and dimensions to match true size (a stroke makes the shape a bit larger)
context.strokeRect(rectX+(cornerRadius/2), rectY+(cornerRadius/2), rectWidth-cornerRadius, rectHeight-cornerRadius);
context.fillRect(rectX+(cornerRadius/2), rectY+(cornerRadius/2), rectWidth-cornerRadius, rectHeight-cornerRadius);
// You can do the same thing with paths, like this triangle
// Remember that a stroke will make the shape a bit larger so you'll need to fiddle with the
// coordinates to get the correct dimensions.
context.beginPath();
context.moveTo(400, 60);
context.lineTo(440, 140);
context.lineTo(360, 140);
context.closePath();
context.stroke();
context.fill();
This javascript code will design canvas box just like below g]iven image

unable to draw rectangle on canvas

I am drawing an image on a canvas with white background color. I want to draw a border on the image and I am unable to do so. Here is my code:
var canvas = parent.document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext('2d');
context.fillStyle = "black";
context.font = "50px Arial";
//context.fillText(chartId, canvas.width-200, 50);
context.drawImage(image, 0, 0);
context.fillStyle = "#000000";
context.rect(0,0,canvas.width,canvas.height);
context.globalCompositeOperation = "destination-over";
context.fillStyle = "#FFFFFF";
But I don't see any border when I download this image.
You forgot to stroke your rect.
context.stroke();
There are two things missing.
is the context.stroke(); after painting your rect.
You should start drawing your rect() with context.beginPath();. This is to avoid the next stroke to also affect the first rectangle that you drew.
Another possible solution is to instead use the function context.strokeRect(); saving you the trouble of having to beingPath() and stroke().
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext('2d');
context.fillStyle = "black";
context.font = "50px Arial";
//context.fillText(chartId, canvas.width-200, 50);
context.drawImage(image, 0, 0);
context.fillStyle = "#000000";
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
context.stroke();
context.globalCompositeOperation = "destination-over";
context.fillStyle = "#FFFFFF";
it looks like,you don't do the context.stroke() operation?

Javascript code display text

Have code for a rectangle with a line through it, I would like to display text under the rectangle. How do I add this into my code? Or can someone point me in the right direction?
<canvas id="main" width="300" height="300"></canvas>
<script>
var canvas = document.getElementById("main");
var context = canvas.getContext('2d');
context.fillStyle = "#008000";
context.rect(0,0,300,300);
context.fill();
context.beginPath();
context.lineWidth = 10;
context.strokeStyle = "blue";
context.lineCap = "round";
context.moveTo( 50, 150);
context.lineTo (250, 150);
context.stroke();
context.closePath();
You can draw text using fillText:
context.fillText("Hello, world!", 50, 50);
For more information, see this article on the Mozilla Developer Network.
I believe you want the fillText function:
context.font="30px Arial";
context.fillText("Hello World",10,50);

Categories