Click here to Skip to main content
Rate this: bad
Please Sign up or sign in to vote.
See more: HTML5 Canvas
I want to draw analog clock. So the main canvas will be dial and, hours and minutes arrows, and the second will be seconds arrow (for update every 1 second).
  <canvas id="clock"></canvas>
  <canvas id="second"></canvas>
    canvas = document.getElementById('clock');
    canvas.width = document.documentElement.clientWidth;
    canvas.height = document.documentElement.clientHeight-6;  
    canvas = document.getElementById('second');
    canvas.width = document.documentElement.clientWidth;
    canvas.height = document.documentElement.clientHeight-6;

But canvases are not transparent and I can not to draw. Any ideas?
Thank you for attention.
Posted 26-Sep-12 9:15am
Edited 26-Sep-12 9:36am
Rate this: bad
Please Sign up or sign in to vote.

Solution 1

Sergey Alexandrovich Kryukov at 26-Sep-12 17:39pm
Not bad, even though OP's problem is not clear to me; a 5.
ridoy at 27-Sep-12 10:04am
thanks Sergey..
Rate this: bad
Please Sign up or sign in to vote.

Solution 2

Canvases are by default transparent unless you style them with a CSS-rule that sets the background color.
Canvas element itself provides only the, well canvas, or the bitmap you want to draw to. In order to actually be able to draw onto it you need to expose the drawing interface called context.
F.ex, first your code with some modifications:
    var canvas1 = document.getElementById('clock');
    canvas1.width = window.innerWidth;
    canvas1.height = window.innerHeight-6;
    var canvas2 = document.getElementById('second');
    canvas2.width = window.innerWidth;
    canvas2.height = window.innerHeight-6;
(remember to use var or else the "variable" ends up on the global scope as a property instead).
Now, continue with the following:
    var ctx1 = canvas1.getContext('2d');
    var ctx2 = canvas2.getContext('2d');
This will give you the mentioned context for each canvas. Now you will be able to draw onto the canvas by using the context's commands, f.ex:
    ctx1.moveTo(0, 0);
    ctx1.lineTo(canvas1.width, canvas1.height);
Hope this help you on onto the right track.
I am not sure why you would want to use two canvases like this though. The use of two canvases is useful if you want to draw the graphics onto an off-screen canvas first (where one is created manually in code) and then 'blit' its content to the on-screen canvas. This may or may not give a little performance boost (depending on environment, machine etc).
For a clock this will probably be overkill as most updates are done per 1 second (unless you want to animate the second pointer continuously). I would therefor recommend you to use just one canvas for this purpose.
See a reference on the commands that you can use with canvas here with examples:[^]

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 6,165
1 DamithSL 4,658
2 Maciej Los 4,107
3 Kornfeld Eliyahu Peter 3,649
4 Sergey Alexandrovich Kryukov 3,382

Advertise | Privacy | Mobile
Web01 | 2.8.141220.1 | Last Updated 19 Apr 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100