Bugzilla – Bug 19905
HTML5 Canvas Gradient - new idea, "new Canvas"...
Last modified: 2013-03-04 17:50:28 UTC
I have too many ideas.
1. I suggest remove "CanvasGradient" object and add:
[ [ <angle> | to <side-or-corner> ] ,]?
For "fillStyle" and "strokeStyle".
ctx.fillStyle = "linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%)";
2. I suggest new transformations:
ctx.setTransform("matrix(1, 0, 0, 1, 0, 0)");
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.
HTML5 Canvas v2.0 - Dirty Edition.
Some interesting ideas. Because these are new features, I'm reassigning these to html.next for consideration.
Mass move to "HTML WG"
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.
(In reply to comment #0)
> I have too many ideas.
> 1. I suggest remove "CanvasGradient" object and add:
> [ [ <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)");
> 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
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
Rationale: suggestions appear too confusing, or not different enough in functionality than the current state.