This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.

Bug 19905 - HTML5 Canvas Gradient - new idea, "new Canvas"...
Summary: HTML5 Canvas Gradient - new idea, "new Canvas"...
Status: CLOSED WONTFIX
Alias: None
Product: HTML WG
Classification: Unclassified
Component: HTML Canvas 2D Context (show other bugs)
Version: unspecified
Hardware: All All
: P2 normal
Target Milestone: ---
Assignee: Jay Munro
QA Contact: HTML WG Bugzilla archive list
URL:
Whiteboard:
Keywords:
Depends on:
Blocks:
 
Reported: 2012-11-08 04:57 UTC by Alexei03a
Modified: 2013-03-04 17:50 UTC (History)
7 users (show)

See Also:


Attachments

Description Alexei03a 2012-11-08 04:57:06 UTC
I have too many ideas.

1. I suggest remove "CanvasGradient" object and add:

  linear-gradient(
      [ [ <angle> | to <side-or-corner> ] ,]? 
      <color-stop>[, <color-stop>]+
  )

For "fillStyle" and "strokeStyle".
For example:
  ctx.fillStyle = "linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%)";

2. I suggest new transformations:
  ctx.transform(String cssTransform);
  ctx.setTransform(String cssTransform);

For example:
  ctx.setTransform("translate(10px) rotate(45deg)");
  ctx.setTransform("matrix(1, 0, 0, 1, 0, 0)");

Old:
  ctx.setTransform(1, 0, 0, 1, 0, 0);

3. I suggest "Canvas" object:
  var canvas = new Canvas(100, 100);
  var ctx = canvas.getContext("2d");
  ctx.fillRect(0, 0, 100, 100);

4. I suggest new color system:
  rgba(white, 0.5) instead of rgba(255, 255, 255, 0.5)
  rgba(#00FF00, 0.5) instead of rgba(0, 255, 0, 0.5)

I want more freedom in web standards, much more! In our world, all web programmers - from small to big cheaters. Let's make concessions.
Comment 1 Alexei03a 2012-11-08 04:59:34 UTC
HTML5 Canvas v2.0 - Dirty Edition.
Comment 2 Jay Munro 2012-11-08 17:01:16 UTC
Some interesting ideas. Because these are new features, I'm reassigning these to html.next for consideration.
Comment 3 Robin Berjon 2013-01-21 15:58:26 UTC
Mass move to "HTML WG"
Comment 4 Robin Berjon 2013-01-21 16:01:13 UTC
Mass move to "HTML WG"
Comment 5 Jay Munro 2013-01-24 16:39:05 UTC
Ok, to summarize:

1. create a linear-gradient that lets you set an angle and color stops. 

Q. how does this improve the use of createLinearGradient, and individual color stops? It seems to make a longer single line, rather than a more readable individual lines. (gradient.addColorStop("0", "magenta"), gradient.addColorStop(".50","yellow"), etc... 

What key words do you see for angle or side to corner. You've got "to bottom", are there others and how would they operate?

2. A simpler transform that takes rotation and translate parameters, instead of only a matrix, as well as degrees rather than radians. Sounds handy. I'd add-in for rotate having an optional setting of center point of rotation (rotate(45deg,100,100).

3. Canvas object with optional width and height parameters. I like that one. Without the extra parameters, it would be default (300x150?), correct? 

4. Giving colors as either a hex block or a text color value, plus transparency (alpha channel). This looks like a quick way to set a color value other than full alpha, since rgba() can substitute for a color value in most situations. Good idea, though I wonder what the perf hit would be for implementers to parse before applying the alpha. Lets toss it out there and see what people think.

Assigning to myself to track.
Comment 6 rcabanie 2013-03-02 21:44:26 UTC
(In reply to comment #0)
> I have too many ideas.
> 
> 1. I suggest remove "CanvasGradient" object and add:
> 
>   linear-gradient(
>       [ [ <angle> | to <side-or-corner> ] ,]? 
>       <color-stop>[, <color-stop>]+
>   )
> 
> For "fillStyle" and "strokeStyle".
> For example:
>   ctx.fillStyle = "linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%)";

CSS gradients only make sense in the box model. For instance, what is "bottom" for a canvas gradient?
This is too confusing to be useful.

> 
> 2. I suggest new transformations:
>   ctx.transform(String cssTransform);
>   ctx.setTransform(String cssTransform);
> 
> For example:
>   ctx.setTransform("translate(10px) rotate(45deg)");
>   ctx.setTransform("matrix(1, 0, 0, 1, 0, 0)");
> 
> Old:
>   ctx.setTransform(1, 0, 0, 1, 0, 0);

There's active development on a Matrix object that will harmonize transforms between SVG, canvas, WebGL and CSS. 
It will be less confusing if this new object is integrated in canvas.

> 
> 3. I suggest "Canvas" object:
>   var canvas = new Canvas(100, 100);
>   var ctx = canvas.getContext("2d");
>   ctx.fillRect(0, 0, 100, 100);

What would be the advantage? It seems like you can already do this.

> 
> 4. I suggest new color system:
>   rgba(white, 0.5) instead of rgba(255, 255, 255, 0.5)
>   rgba(#00FF00, 0.5) instead of rgba(0, 255, 0, 0.5)

Canvas takes CSS colors. Maybe it's better to propose that color proposal on www-style
Comment 7 Jay Munro 2013-03-04 17:50:28 UTC
EDITOR'S RESPONSE: 
This is an Editor's Response to your comment. If
you are satisfied with this response, please change the state of
this bug to CLOSED. If you have additional information and would
like the Editor to reconsider, please reopen this bug. If you would
like to escalate the issue to the full HTML Working Group, please
add the TrackerRequest keyword to this bug, and suggest title and
text for the Tracker Issue; or you may create a Tracker Issue
yourself, if you are able to do so. For more details, see this
document:
       http://dev.w3.org/html5/decision-policy/decision-policy.html

Status:                      Rejected
Rationale:               suggestions appear too confusing, or not different enough in functionality than the current state.