We Keep Coding

how to make context rotate on click

I want to make the context inside the canvas to rotate on button click, I'm pretty sure that I have to use onclick, but I don't know where to put it or what logic do I have to write inside it. Can anyone help me out?
I tried using jquery on click but that does not work:
HTML:
<input type="file" id="fileInp" onchange="readImage(this)">
<button type="button" class="rotate">Rotate</button>
<div>
<canvas id="canvasImg" style="max-width:100%; border:solid;" width="100%" height="100%"></canvas>
</div>
Javascript:
function readImage(input) {
const canvas = document.getElementById('canvasImg');
const context = canvas.getContext("2d");
context.canvas.width = window.innerWidth;
context.canvas.height = window.innerHeight;
context.clearRect(0, 0, canvas.width, canvas.height);
if (input.value !== '') {
imgSrc = window.URL.createObjectURL(input.files[0]);
}
const img = new Image();
img.onload = function() {
context.drawImage(img, 0, 0);
}
img.src = imgSrc;
}
jQuery('.rotate').on('click', function() {
degree = 90;
drawRotate(degree);
})
function drawRotate(degree) {
context.clearRect(0, 0, canvas.width, canvas.height);
context.save();
context.translate(canvas.width / 2, canvas.height / 2);
context.rotate(degrees * Math.PI / 180);
context.drawImage(image, -image.width / 2, -image.width / 2);
context.restore();
}

ok so there are a few problems in your code..
in the drawRotate function you use variables such as image, context, canvas which is never has declared..
you call the function param degree but use it as degreeS
you translate the context forward, but never return him back
maybe there was more and i forget..
shortly, please look at the attached code
<input type="file" id="fileInp" onchange="readImage(this)">
<button type="button" class="rotate" onclick="drawRotate(90)">Rotate</button>
<div>
<canvas id="canvasImg" style="max-width:100%; border:solid;" width="100%" height="100%"></canvas>
</div>
<script>
const canvas = document.getElementById('canvasImg');
const context = canvas.getContext("2d");
const input = document.getElementById('fileInp');
function readImage(input) {
context.canvas.width = window.innerWidth;
context.canvas.height = window.innerHeight;
context.clearRect(0, 0, canvas.width, canvas.height);
let imgSrc;
if (input.value !== '') {
imgSrc = window.URL.createObjectURL(input.files[0]);
}
const img = new Image();
img.onload = function() {
context.translate(canvas.width / 2, canvas.height / 2);
context.drawImage(img, -img.width / 2, -img.height / 2, img.width, img.height);
context.translate(-canvas.width / 2, -canvas.height / 2);
}
img.src = imgSrc;
}
function drawRotate(degree) {
let imgSrc;
if (input.value !== '') {
imgSrc = window.URL.createObjectURL(input.files[0]);
}
const img = new Image();
img.onload = function() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.translate(canvas.width / 2, canvas.height / 2);
context.rotate(degree * Math.PI / 180);
context.drawImage(img, -img.width / 2, -img.height / 2, img.width, img.height);
context.translate(-canvas.width / 2, -canvas.height / 2);
}
img.src = imgSrc;
}
</script>

play around rotate(-180deg) for continous rotation
function readImage(input) {
const canvas = document.getElementById('canvasImg');
const context = canvas.getContext("2d");
context.canvas.width = window.innerWidth;
context.canvas.height = window.innerHeight;
context.clearRect(0, 0, canvas.width, canvas.height);
if (input.value !== '') {
imgSrc = window.URL.createObjectURL(input.files[0]);
}
const img = new Image();
img.onload = function() {
context.drawImage(img, 0, 0);
}
img.src = imgSrc;
}
jQuery('.rotate').on('click', function() {
$("#canvasImg").css({'transform': 'rotate(-180deg)'});
})
function drawRotate(degree) {
context.clearRect(0, 0, canvas.width, canvas.height);
context.save();
context.translate(canvas.width / 2, canvas.height / 2);
context.rotate(degrees * Math.PI / 180);
context.drawImage(image, -image.width / 2, -image.width / 2);
context.restore();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" id="fileInp" onchange="readImage(this)">
<button type="button" class="rotate">Rotate</button>
<div>
<canvas id="canvasImg" style="max-width:100%; border:solid;" width="100%" height="100%"></canvas>
</div>

Write custom text on mug from user by keyboard by Javascript, Html5

I want to write text on mug.And change property like font-style, color, size by Javascript, Html5. Right now i am using Javascript, Html5.
I want to write text on this mug image and also want to change font color, font-size, font style and rotate text.
I seen this link but i am not satisfied.
How can I write text on a HTML5 canvas element?
I can't give you original code. I have a sample code for this page.
HTML CODE:
<body>
<canvas id="canvas"></canvas>
</body>
JAVASCRIPT CODE:
$(function () {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var productImg = new Image();
productImg.onload = function () {
var iw = productImg.width;
var ih = productImg.height;
console.log("height");
canvas.width = iw;
canvas.height = ih;
ctx.drawImage(productImg, 0, 0, productImg.width, productImg.height,
0, 0, iw, ih);
//start();
// outline
ctx.beginPath();
ctx.moveTo(88, 235.734375);
ctx.bezierCurveTo(88, 234.734375, 204, 298, 327, 234.734375);
ctx.stroke();
};
productImg.src = "https://d2z4fd79oscvvx.cloudfront.net/0018872_inspirational_teacher_mug.jpeg";
var img = new Image();
img.onload = start;
img.src = "http://blog.foreigners.cz/wp-content/uploads/2015/05/Make-new-friends.jpg";
var pointer = 0;
function start() {
var iw = img.width;
var ih = img.height;
var xOffset = 125,
yOffset = 122;
var a = 122.0;
var b = 30.0;
var scaleFactor = iw / (2*a);
// draw vertical slices
for (var X = 0; X < iw; X+=1) {
var y = b/a * Math.sqrt(a*a - (X-a)*(X-a)); // ellipsis equation
ctx.drawImage(img, X * scaleFactor, 0, 6, ih, X + xOffset, y + yOffset, 1, ih - 605 + y/2);
}
}
});
I am only using Javascript, Html5. I have seen this link http://varunpes.net46.net/Fancy_Product_Designer_V3.0.7/example/cust-txt.jsp
But this plugin have use in Php. I don't want this functionality in Php.
Anybody have any idea please share with me. If Any body have different idea than also share with me.

Write custom text in canvas with fabric js library.
var canvas = new fabric.Canvas('canvas');
$('#font').change(function(){
var obj = canvas.getActiveObject();
if(obj){
obj.setFontFamily($(this).val());
}
canvas.renderAll();
});
function addText() {
var oText = new fabric.IText('Tap and Type', {
left: 100,
top: 100 ,
});
canvas.add(oText);
canvas.setActiveObject(oText);
$('#fill, #font').trigger('change');
oText.bringToFront();
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<div class="container">
<div class="row">
<div class="col s12">
<button class="btn" onclick="addText()">Add Custom Text</button>
<select class="browser-default" id="font">
<option>arial</option>
<option>tahoma</option>
<option>times new roman</option>
</select>
<br />
<canvas id="canvas" width="750" height="550" style="border:1px solid #333"></canvas>
</div>
</div>
</div>

HTML5 canvas rendering- path clipping

In My case i have performed path clipping and then draw a image in clipped region. But it does not working.
here my code.`
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var offset = 50;
/*
* save() allows us to save the canvas context before
* defining the clipping region so that we can return
* to the default state later on
*/
context.save();
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI, false);
context.clip();
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 69, 50);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth- vader.jpg';
</script>
</body>
</html>
Now image render without clipping.
Please share your valuable key to do this.

drawImage() not working consistently

When you put a picture named logo.png in the same directory as this html file and try to run it in a web browser the picture only appears 1 times out of 10 refreshes in IE and doesn't appear the first time in Firefox but does appear after further refreshes.
What the heck is going on ?
(drawImage() method is called in the showIntro() function)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example 1 - Title Screen</title>
<script>
window.onload = function () {
var canvas = document.getElementById('myCanvas');
var c = canvas.getContext('2d');
var State = {
_current: 0,
INTRO: 0,
LOADING: 1,
LOADED: 2
}
window.addEventListener('click', handleClick, false);
window.addEventListener('resize', doResize, false);
doResize();
function handleClick() {
State._current = State.LOADING;
fadeToWhite();
}
function doResize() {
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
switch (State._current) {
case State.INTRO:
showIntro();
break;
}
}
function fadeToWhite(alphaVal) {
// If the function hasn't received any parameters, start with 0.02
var alphaVal = (alphaVal == undefined) ? 0.02 : parseFloat(alphaVal) + 0.02;
// Set the color to white
c.fillStyle = '#FFFFFF';
// Set the Global Alpha
c.globalAlpha = alphaVal;
// Make a rectangle as big as the canvas
c.fillRect(0, 0, canvas.width, canvas.height);
if (alphaVal < 1.0) {
setTimeout(function () {
fadeToWhite(alphaVal);
}, 30);
}
}
function showIntro() {
var phrase = "Click or tap the screen to start the game";
// Clear the canvas
c.clearRect(0, 0, canvas.width, canvas.height);
// Make a nice blue gradient
var grd = c.createLinearGradient(0, canvas.height, canvas.width, 0);
grd.addColorStop(0, '#ceefff');
grd.addColorStop(1, '#52bcff');
c.fillStyle = grd;
c.fillRect(0, 0, canvas.width, canvas.height);
var logoImg = new Image();
logoImg.src = './logo.png';
// Store the original width value so that we can keep
// the same width/height ratio later
var originalWidth = logoImg.width;
// Compute the new width and height values
logoImg.width = Math.round((50 * document.body.clientWidth) / 100);
logoImg.height = Math.round((logoImg.width * logoImg.height) / originalWidth);
// Create an small utility object
var logo = {
img: logoImg,
x: (canvas.width / 2) - (logoImg.width / 2),
y: (canvas.height / 2) - (logoImg.height / 2)
}
// Present the image
c.drawImage(logo.img, logo.x, logo.y, logo.img.width, logo.img.height);
// Change the color to black
c.fillStyle = '#000000';
c.font = 'bold 16px Arial, sans-serif';
var textSize = c.measureText(phrase);
var xCoord = (canvas.width / 2) - (textSize.width / 2);
c.fillText(phrase, xCoord, (logo.y + logo.img.height) + 50);
}
}
</script>
<style type="text/css" media="screen">
html { height: 100%; overflow: hidden }
body {
margin: 0px;
padding: 0px;
height: 100%;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="100" height="100">
Your browser doesn't include support for the canvas tag.
</canvas>
</body>
</html>

The problem is that you aren't waiting for the image to load when you call drawImage().
You could use something like:
logo.img.onload = function(){
c.drawImage(logo.img, logo.x, logo.y, logo.img.width, logo.img.height);
};
Although make sure you don't start modifying the canvas until this has happened.

excanvas drawimage doesn't work on IE8

Hi I have managed to make excanvas work in IE8 for simple examples however I couldn't make the following canvas example which contain drawimage work at IE8. Does anyone have any experience with excanvas and drawimage.
Thanks for your help...
var foo = document.getElementById("foo");
var canvas = document.createElement('canvas');`
canvas.setAttribute("width", 300);
canvas.setAttribute("height", 300);
foo.appendChild(canvas);
canvas= G_vmlCanvasManager.initElement(canvas);
var ctx = canvas.getContext('2d');
ctx.save();
ctx.clearRect( 0, 0, canvas.width, canvas.height );
ctx.translate( canvas.width/2 , canvas.height/2 );
ctx.drawImage( image, -165, -160 );
ctx.rotate( 100 * Math.PI / 180);
ctx.drawImage( image2, -13, -121.5 );
ctx.restore();
image1.src = 'img.png';
image2.src = 'img2.png';

Use a test case to isolate drawImage:
<!DOCTYPE html>
<html>
<head>
<title>Overflow Test</title>
<style>
body {
text-align: center
}
</style>
<!--[if IE]><script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/excanvas.js"></script><![endif]-->
<script>
window.onload = function() {
var ctx = document.getElementById('c').getContext('2d');
var img = document.images[0];
ctx.rotate(Math.PI / 8);
ctx.drawImage(img, 50, 50);
img.style.display = 'none';
};
</script>
</head>
<body>
<img src="http://opera.com/favicon.ico">
<canvas id="c" width="200" height="200"></canvas>
</body>
</html>
References
Explorer Canvas test cases: drawimage.html