HTML CANVAS not working

HTML CANVAS not working

By : user2956041
Date : November 22 2020, 10:48 AM
it helps some times The code seems ok to me. I added a call to the init function.
As LJ_1102 stated: The offset issue is a CSS issue. The width and height attributes set the width and height of the bitmap itself. The CSS width and height attributes set the element width and height. So, think about the canvas tag as if it were an img tag. If you set the CSS width of an img, it would stretch. Canvas will do the same thing.
code :
var canvas, ctx, flag = false,
  prevX = 0,
  currX = 0,
  prevY = 0,
  currY = 0,
  dot_flag = false;

var x = "black",
  y = 2;

function init() {
  canvas = document.getElementById('can');
  ctx = canvas.getContext("2d");
  w = canvas.width;
  h = canvas.height;

  canvas.addEventListener("mousemove", function(e) {
    findxy('move', e)
  }, false);
  canvas.addEventListener("mousedown", function(e) {
    findxy('down', e)
  }, false);
  canvas.addEventListener("mouseup", function(e) {
    findxy('up', e)
  }, false);
  canvas.addEventListener("mouseout", function(e) {
    findxy('out', e)
  }, false);

function color(obj) {
  switch (obj.id) {

    case "blue":
      x = "blue";
    case "red":
      x = "red";

    case "black":
      x = "black";
    case "white":
      x = "white";
  if (x == "white") y = 14;
  else y = 2;


function draw() {
  ctx.moveTo(prevX, prevY);
  ctx.lineTo(currX, currY);
  ctx.strokeStyle = x;
  ctx.lineWidth = y;

function erase() {
  var m = confirm("Want to clear");
  if (m) {
    ctx.clearRect(0, 0, w, h);
    document.getElementById("canvasimg").style.display = "none";

function save() {
  document.getElementById("canvasimg").style.border = "2px solid";
  var dataURL = canvas.toDataURL();
  document.getElementById("canvasimg").src = dataURL;
  document.getElementById("canvasimg").style.display = "inline";

function findxy(res, e) {
  if (res == 'down') {
    prevX = currX;
    prevY = currY;
    currX = e.clientX - canvas.offsetLeft;
    currY = e.clientY - canvas.offsetTop;

    flag = true;
    dot_flag = true;
    if (dot_flag) {
      ctx.fillStyle = x;
      ctx.fillRect(currX, currY, 2, 2);
      dot_flag = false;
  if (res == 'up' || res == "out") {
    flag = false;
  if (res == 'move') {
    if (flag) {
      prevX = currX;
      prevY = currY;
      currX = e.clientX - canvas.offsetLeft;
      currY = e.clientY - canvas.offsetTop;
<div class="row 50% third">
  <div class="12u">
    <canvas class="image fit" id="can" width="50%" height="50%" style=" background-color:rgb(250,250,250); "></canvas>
    <div style="width:5%;height:30px;background:blue;" id="blue" class="colors" onclick="color(this)"></div>
    <div style="width:5%;height:30px;background:red;" id="red" class="colors" onclick="color(this)"></div>
    <div style="width:5%;height:30px;background:black;" id="black" class="colors" onclick="color(this)"></div>
    <div style="width:5%;height:30px;background:white;border:2px solid;" id="white" class="colors" onclick="color(this)"></div>
    <img id="canvasimg" style="position:absolute;top:10%;left:52%;" style="display:none;">
    <input type="button" value="save" id="btn" size="30" onclick="save()" style="position:absolute;top:55%;left:10%;">
    <input type="button" value="clear" id="clr" size="23" onclick="erase()" style="position:absolute;top:55%;left:15%;">

Share : facebook icon twitter icon
HTML 5 Working with a canvas or canvas alternative

HTML 5 Working with a canvas or canvas alternative

By : UteHo
Date : March 29 2020, 07:55 AM
may help you . You have to clear the whole canvas and start again each tick. You should store the images in an array to keep track of them like:
code :
        image: "image_bottom.png",
        x: 100,
        y: 200
        image: "image_middle.png",
        x: 10,
        y: 200
        image: "image_topmost.png",
        x: 100,
        y: 20
// Redraws the canvas completely
// pseudo code
function tick(){

    for each in list
        draw image

setInterval(tick,1000/60); // draw for 60FPS
Easel Js works with a canvas in the html document but it doesn't work when I put the canvas in an HTML widget in my GWT

Easel Js works with a canvas in the html document but it doesn't work when I put the canvas in an HTML widget in my GWT

By : user3145811
Date : March 29 2020, 07:55 AM
I wish did fix the issue. I would not use getElementById(). Here is what should work. In UI Binder:
code :
     <canvas ui:field="canvas" width="200" height="200">
         alternate content
import static com.google.gwt.query.client.GQuery.$;

Element canvas;
HTML Canvas fill not working

HTML Canvas fill not working

By : user3522751
Date : March 29 2020, 07:55 AM
around this issue Fiddle Updated code
code :
  var c = document.getElementById("main");
  var ctx = c.getContext("2d");
canvas html not working

canvas html not working

By : Benjamin Parker
Date : March 29 2020, 07:55 AM
it fixes the issue Use document.getElementsByName() to get an element by name, and document.getElementByID should be document.getElementById. And use == (or ===) and not .equals():
code :
function draw()
    shapeSelected = document.getElementsByName("shapeChosen")[0].value;
    //creating canvas object
    canvas = document.getElementById("myCanvas");
Buttons not working on html canvas

Buttons not working on html canvas

By : Sam
Date : March 29 2020, 07:55 AM
seems to work fine Behaviour can differ on different browsers, the below works on Firefox and Chrome (note the zindex). Fiddle at https://jsfiddle.net/p9gz8rpm/:
code :
<canvas id="whiteboard" style="z-index:-1; position: absolute; left: 0px; top: 0px;"></canvas>
Related Posts Related Posts :
  • clearvalidators not working in angular 6 form control
  • Remove Count Attribute in json data
  • queue up function callbacks
  • How to stop all Soundcloud streams in once?
  • Sliding div onclick left/right
  • RequireJS JQuery shim doesnt work with VS2013
  • What is the Meteor concurrency model?
  • Events on children of contenteditable element
  • Simple jquery not working to print the input value
  • Javascript templating language in reverse
  • Making Pagination in Javascript Scalable (for large # of db results)
  • Performance of Stateless Authentication in SPA and SSO (Single Sign On)
  • Assigning a value for view asynchronously
  • Mocha JS: How to reuse assertions within a spec?
  • Is ember.js stable enough to use in a real world project?
  • jQuery Load() not loading within div
  • encode stream from webCam h264
  • Regex to find pattern, return subpattern
  • Why does this regex to remove empty <p></p> tags from a string fail?
  • Rails: pass data to javascript
  • Quickest way to check if a number is in a set?
  • Phonegap events online/offline not working
  • In HTML5, please explain the meaning of '?' in the statement
  • Form to use AJAX rather than a page refresh but also utilise error handling?
  • JQuery Script looping error
  • different size divs align top left
  • Image fade-in when webpage finishes loading
  • Seeking HTML5 audio element causes delay (breaks sync)
  • How can I read & write data to a new tab in Firefox?
  • jQuery or JS turn all words into italic type
  • iOS css -webkit-transform: scale doesn't offset touch events
  • Populate select list using javascript
  • Can you work out why my .js file doesn't seem to be linking to my html?
  • Make slideToggle effect only one element at a time
  • Output sound using JavaScript
  • What is the analytics.js equivalent of _trackPageview found in ga.js
  • How can I check if a JS file has been included already?
  • hasClass and condition not working
  • EDITED: I'm having issues with a button and its function
  • Importing XML in HTML with javascript
  • Create new function in contentScriptFile in Firefox extension
  • Should I build Node.js from source or download the OS X installer?
  • How to enforce integer sizes in JS? (TypeScript?)
  • How to update the JSON object without deleting old values using javascript
  • Reading a javascript variable containing a string into another file
  • Possible to prevent 403 errors from logging to the web console?
  • Jquery Accordion - Expand and collapse div on hover
  • jquery .hide() function - Hide mobile, Display Desktop
  • Holding password in javascript variable - security implications?
  • JQPlot trouble to render vertical stacked bar and horizontal legend
  • counts days inbetween then add class to those days with nested divs?
  • Marionette.js with Rails (Devise) Authentication
  • javascript anonymous function evaluation idiom
  • Why am I losing the decimal when working this equation in Javascript?
  • Site redirects to index.php after being open while making calls to an API using AJAX
  • How to determine when multiple callbacks are all done
  • How to update Yeoman dependencies?
  • How can I do a /resolve with the Soundcloud Javascript SDK?
  • I'm not able to call a named callback function
  • How to get value of Paragraph element contained in <div> in HTML using JavaScript
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org