i'm receving from webserver part of image, let say 600px x 600px, which i'm drawing in canvas.
The real size of image is let say 600px x 1200px(height).
I need to create scrollbar over canvas. After i will drag scrollbar i will count, how many pixels i've moved scrollbar, send to server information and i will receive other portion of picture (600x600px) but scrolled.
The mechanism is done by me, but i need to draw scrollbar over canvas.
<b-card>
<div id="image">
<canvas
id="canvasId"
ref="canRef"
#mousedown="clickMe"
#mouseup="scrollOff"
#mousemove="scrollMe"
/>
</div>
</b-card>
How to draw scroll bar on the right side of canvas?
First, fetch the canvas element and its context
const canvas = document.getElementById('canvasId');
const ctx = canvas.getContext('2d');
Then, draw the rectangle using the stroke() function
ctx.beginPath();
ctx.rect(0, 0, 150, 100); //change to the coordinates you want
ctx.stroke();
You can control the color and the width of the line using:
ctx.lineWidth = 10;
ctx.strokeStyle = '#ff0000';
Related
I am creating a drawing app, and using this function to download the canvas image.
function download() {
var dt = canvas.toDataURL('image/png');
this.href = dt;
};
I want to set the canvas background to white before downloading because on mobile, the images are very distorted and black. Any ideas?
You may want to draw a white rectangle the size of the entire canvas, beneath the actual content of the canvas.
// get the canvas 2d context
var ctx = canvas.getContext('2d');
// set the ctx to draw beneath your current content
ctx.globalCompositeOperation = 'destination-over';
// set the fill color to white
ctx.fillStyle = 'white';
// apply fill starting from point (0,0) to point (canvas.width,canvas.height)
// these two points are the top left and the bottom right of the canvas
ctx.fillRect(0, 0, canvas.width, canvas.height);
You have to apply these lines before generating your toDataUrl() stream.
Idea taken from: http://www.mikechambers.com/blog/2011/01/31/setting-the-background-color-when-generating-images-from-canvas-todataurl/
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("pan");
img.setAttribute('crossOrigin','anonymous');
ctx.drawImage(img,10,10);
var img = document.getElementById("MyPix");
img.setAttribute('crossOrigin','anonymous');
ctx.drawImage(img,10,10);
As its context is 2d i cannot draw the image in canvas at any angle, webGl could be better solution but could not get any relevent example using webgl. Please help.
You can translate and rotate the context before drawing an image. To draw an image at a specific position, rotated by a specific angle, use this code:
ctx.save();
ctx.translate(10,10); // here the position for the image to be drawn
ctx.rotate(someAngle); // here your angle
ctx.drawImage(img,0,0);
ctx.restore();
Note, that the above code will rotate your image by the left upper corner of the image. To rotate it by it's center use:
ctx.drawImage(img,-img.width*0.5,-img.height*0.5);
instead.
I'm trying to learn canvas.
I was trying to draw some lines using moveTo() and lineTo() on canvas.
The co-ordinates I give and the point rendered over canvas are not matching
I have taken a canvas of size 500px X 500px
for (0,0) it is coming fine.
for all other points it is not matching the co-ordinates
for (300, 150) it is painting at (500,500).
I'm not getting why this is happening because if I set my canvas size t0 300px X 150px it is painting correctly
here is my js
var context = document.getElementById("myCanvas").getContext("2d");
context.moveTo(0, 0);
context.lineTo(100, 100);
context.lineTo(100, 100);
context.lineTo(200, 100);
context.lineTo(300, 150);
context.stroke();
jsfiddle here
Can any one please tell me where I'm wrong
set the height and width of the canvas element directly:
<canvas id="myCanvas" width="500" height="500"> </canvas>
fiddle: http://jsfiddle.net/nLUEX/2/
I am SLOWLY trying to create the breakout game to get more familiar with javascript.
I am trying to re size the canvas element according to the window size, but notice the
circle I am rendering re sizes automatically according to the size of the canvas. How would i render the size of the circle independently from the size of the canvas?
//resize canvas
$(function(){
$("#canvas").width($(window).width());
});
//get a reference to the canvas
var ctx = $('#canvas')[0].getContext("2d");
//draw a circle
ctx.beginPath();
ctx.arc(75, 75, 10, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
here is my fiddle:
http://jsfiddle.net/z25q7/3/
Thank you!
Change the canvas' width property directly, not its CSS style.width (which is what jQuery does):
$("#canvas")[0].width = $(window).width();
More information here: Size of HTML5 Canvas via CSS versus element attributes
Hey Everyone I am new to html5 canvas as I would like to know is there any possibility of getting the image height,width and angle values while resizing and rotating.The image which displays what i want.
I want that process after dropping in to canvas as i searched Google for this couldn't find relevant answer almost everyone is showing the positions of image in canvas that is to kept in code but i want the image should should display its values automatically by click on dimensions button.Thanks in advance any help would be great.
The image should display its dimensions in canvas according to image like if image is changed(or re-sized or rotate automatically the dimensions should change using button click function).
You can play with canvas in the following manner
<canvas id="myCanvas">Your browser does not support the canvas tag.</canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// Draw blue rectangle
ctx.fillStyle = '#0065BD';
ctx.fillRect(0, 0, 125, 75);
// Draw white X
ctx.beginPath();
ctx.lineWidth = "15";
ctx.strokeStyle = "white";
ctx.moveTo(0, 0);
ctx.lineTo(125, 75);
ctx.moveTo(125, 0);
ctx.lineTo(0, 75);
ctx.stroke();
</script>
Hope this helps you.