I've been searching for answer for about 2 hours now and I haven't found my desired answer. My question is, Is it possible, and how, to draw a circle-shaped texture, so that outside the circle, texture would be transparent, is it even possible?
Thanks in advance! This site has been a great help so far!
The easiest way is to open a program like Photoshop and make an image with an alpha-channel. That means: Start with a completely transparent image and draw a circle on it. Then save it as .png
You can then just load it in your game and render it using a SpriteBatch. It (or better your graphics card) knows how to handle the alphachannel and will keep everything but the circle completely invisible.
This way you do not have to manipulate any pixmaps at runtime and you are not limited to simple shapes like circles.
If the portion of the texture you want to see in the circle is not meant to change during execution, the easiest way is to open Photoshop, make what you want, export it as an image and then load it in a Texture or a Sprite object in your code.
But this can also be done at runtime, via OpenGL using a Stencil test. This is the only solution if the portion displayed in the circle will have to be alterable during execution.
pixmap use this link if u are using other than .png format for your images
Apart form it if you are using png images then just draw the cirlce. Outside the circle will remain transparent.
I have a canvas where I manually create rectangles to build a full individual chart diagramm. Doing some coloring and text placing etc...
How can I easily tell a certain area to hide itself and show again?
Can there be a object orient approach to divide the canvas somehow in areas?
I don't think that there is a solution that works the way you want. Canvas element don't keep track of areas are elements like you know it from the dom. There are some things you can do:
Think about using svg. SVG works more like html and can be manipulated via javascript/dom and css.
Redraw the whole canvas with the elements you want to display. You don't have to do this manually. Some framework like paper.js or kinetic.js will help. These framework also have feature like layers.
The canvas element has the api functions getImageData and putImageData. With these functions you can save an area of the canvas into a javascript array and blank the area using the canvas drawing functions. When needed, you can redraw the area with the putImageData function.
Currently I am using the THREE.js library to render a 3D scene, no issues there.
I would like to overlay an SVG , however I have the following issue, best demonstrated in image:
As you can see, without WebGL (top image), my 2D Elements render. The red bar is from Raphael (SVG), and the grey thumbstick is rendered using pure Canvas 2D Context.
With WebGL underlayed (bottom image), the pure Canvas 2D Context continues to render normally, however the Raphael (SVG) takes on the appearance of the underlaying WebGL. The 3D View demonstrates that the layers and positions are correct however.
Is this simply a case of two incompatible methods of rendering, or is there perhaps a setting I might change somewhere. I would prefer to use Raphael for it's .onTouch functionality, but I am open to fall back to pure Canvas 2D Context for the overlay if I must.
Looks like a zIndex issue. When you add the three.js domelement what are you adding it to?
Is the svg higher up the dom tree and you append the webgl at the end?
Is the webgl absolutely positioned but the svg is not? etc
I’m currently using the ‘GroundOverlay’ function within a KML file to display an circular image. I know the circle is 48 degrees in diameter, and I want it to look like a circle when I overlay it on the earth. Rather than being a perfect circle though, it’s distorted, most visibly at the poles. I think the reason for the distortion is that GoogleEarth assumes my original image used a map projection, so GE “unprojects” my image, creating the distortion. Is there a way to overlay my circular image as a circle through KML or the maps API by turning off the projection? Or is my only option to project my circular image into a simple cylindrical projection before I call GroundOverlay on it? I'd really prefer the first option if it exists.
What are the differences between SVG and HTML5 Canvas? They both seem to do the same to me. Basically, they both draw vector artwork using coordinate points.
What am I missing? What are the major differences between SVG and HTML5 Canvas? Why should I choose one over the other?
SVG is like a "draw" program. The drawing is specified as drawing instructions for each shape and any part of any shape can be changed. Drawings are shape-oriented.
Canvas is like a "paint" program. Once the pixels hit the screen, that is your drawing. You cannot change shapes except by overwriting them with other pixels. Paintings are pixel-oriented.
Being able to change drawings is very important for some programs; e.g. drafting apps, diagramming tools, etc. So SVG has an advantage here.
Being able to control individual pixels is important for some artistic programs.
Getting great animation performance for user-manipulation via mouse drags is easier with Canvas than SVG.
A single pixel on the computer screen will often consume 4 bytes of information and a computer screen these days takes several megabytes. So Canvas might be inconvenient if you want to let the user edit an image and then upload it again.
By contrast, drawing a handful of shapes that cover the entire screen using SVG takes up few bytes, downloads quickly, and can be uploaded again easily with the same advantages going in that direction as when it comes down on the other direction. So SVG can be faster than Canvas.
Google implemented Google Maps with SVG. That gives the web app its zippy performance and smooth scrolling.
See Wikipedia: http://en.wikipedia.org/wiki/Canvas_element
SVG is an earlier standard for drawing
shapes in browsers. However, SVG is at
a fundamentally higher level because
each drawn shape is remembered as an
object in a scene graph or DOM, which
is subsequently rendered to a bit map.
This means that if attributes of an
SVG object are changed, the browser
can automatically re-render the scene.
In the example above, once the
rectangle is drawn, the fact that it
was drawn is forgotten by the system.
If its position were to be changed,
the entire scene would need to be
redrawn, including any objects that
might have been covered by the
rectangle. But in the equivalent SVG
case, one could simply change the
position attributes of the rectangle
and the browser would determine how to
repaint it. It is also possible to
paint a canvas in layers and then
recreate specific layers.
SVG images are represented in XML, and
complex scenes can be created and
maintained with XML editing tools.
The SVG scene graph enables event
handlers to be associated with
objects, so a rectangle may respond to
an onClick event. To get the same
functionality with canvas, one must
manually match the coordinates of the
mouse click with the coordinates of
the drawn rectangle to determine
whether it was clicked.
Conceptually, canvas is a lower level
protocol upon which SVG might be
built.[citation needed] However, this
is not (normally) the case—they are
independent standards. The situation
is complicated because there are scene
graph libraries for Canvas, and SVG
has some bit map manipulation
functionality.
UPDATE:
I use SVG because of its markup language abilities - it can be processed by XSLT and can hold other markup in its nodes. Similarly I can hold SVG in my markup (chemistry). This allows me to manipulate SVG attributes (e.g. rendering) by combinations of markup. This may be possible in Canvas but I suspect that it's a lot harder.
High Level Summary of Canvas vs. SVG
Canvas
Pixel based (Dynamic .png)
Single HTML element.(Inspect element in Developer tool. You can see only canvas tag)
Modified through script only
Event model/user interaction is granular (x,y)
Performance is better with smaller surface, a larger number of objects (>10k), or both
SVG
Shape based
Multiple graphical elements, which become part of the DOM
Modified through script and CSS
Event model/user interaction is abstracted (rect, path)
Performance is better with smaller number of objects (<10k), a larger surface, or both
For detailed difference, read http://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx
There's a difference in what they are, and what they do for you.
SVG is a document format for scalable vector graphics.
Canvas is a javascript API for drawing vector graphics to a bitmap of a specific size.
To elaborate a bit, on format versus API:
With svg you can view, save and edit the file in many different tools. With canvas you just draw, and nothing is retained about what you just did apart from the resulting image on the screen. You can animate both, SVG handles the redrawing for you by just looking at the elements and attributes specified, while with canvas you have to redraw each frame yourself using the API. You can scale both, but SVG does it automatically, while with canvas again, you have to re-issue the drawing commands for the given size.
Two things that hit me the most for SVG and Canvas were,
Ability to use Canvas without the DOM, where as SVG depends heavily on DOM and as the complexity increases the performance slows down. Like in game design.
Advantage of using SVG would be that resolution remains the same across platforms which lacks in Canvas.
Lot more detail is provided in this site. http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/
It is absolutely depends on your need/requirement.
If you want to just show an image/chart on a screen then recommended
approach is canvas. (Example is PNG, GIF, BMP etc.)
If you want to extend the features of your graphics for example if you
mouse over on the chart want to zoom certain area without spoil
display quality then you select SVG. (Good example is AutoCAD, Visio,
GIS files).
If you want build a dynamic flow diagram creator tool with shape connector it is better to select SVG rather than CANVAS.
When the size of the screen increases, canvas begins to degrade as
more pixels need to be drawn.
When the number of objects increases on the screen, SVG begins to
degrade as we are continually adding them to the DOM.
Also please refer : http://msdn.microsoft.com/en-us/library/gg193983(v=vs.85).aspx
SVG
Based on use case SVG is used for logos, charts because its vector graphics you draw and forgot about it. When view port change like re-sizing(or zoom) it will adjust itself and no need to redraw.
Canvas
Canvas is bitmap (or raster) it done by painting of pixels to the screen. It is used to develop games or graphics experience (https://www.chromeexperiments.com/webgl) in a given area it paints pixel and changes by redraw it another. Since its a raster type we need to redraw entirely as view port changes.
Reference
http://www.sitepoint.com/7-reasons-to-consider-svgs-instead-of-canvas
http://en.wikipedia.org/wiki/WebGL
http://vector-conversions.com/vectorizing/raster_vs_vector.html
SVG is a specification of a drawing like a file format. A SVG is a document. You can exchange SVG files like HTML files. And additionally because SVG elements and HTML elements share the same the DOM API, it is possible to use JavaScript to generate a SVG DOM in the same way as it is possible to create a HTML DOM. But you do not need JavaScript to generate SVG file. A simple text editor is enough to write a SVG. But you need at least a calculator to calculate the coordinates of the shapes in the drawing.
CANVAS is just a drawing area. It it necessary to use JavaScript to generate the contents of a canvas. You can not exchange a canvas. It is no document. And the elements of the canvas are not part of the DOM tree. You can not use the DOM API to manipulate the contents of a canvas. Instead you have to use a dedicated canvas API to draw shapes into the canvas.
The advantage of a SVG is, that you can exchange the drawing as a document. The advantage of the CANVAS is, that is has a less verbose JavaScript API to generate the contents.
Here is an example, which shows that you can achieve similar results, but the way how to do it in JavaScript is very different.
// Italic S in SVG
(function () {
const ns='http://www.w3.org/2000/svg';
let s = document.querySelector('svg');
let p = document.createElementNS (ns, 'path');
p.setAttribute ('id', 'arc');
p.setAttribute ('d', 'M 0.9 -0.9 a 0.8,0.4 -10 0,0 -0.9,0.9');
s.appendChild (p);
let u = document.createElementNS (ns, 'use');
u.setAttribute ('href', '#arc');
u.setAttribute ('transform', 'rotate(180)');
s.appendChild (u);
})();
// Italic S in CANVAS
(function () {
let c = document.querySelector('canvas');
let w = c.width = c.clientWidth;
let h = c.height = c.clientHeight;
let x = c.getContext('2d');
x.lineWidth = 0.05 * w;
x.moveTo (w/2, h/2);
x.bezierCurveTo (w*0.02, h*0.4,
w*0.4, -h*0.02,
w*0.95, h*0.05);
x.moveTo (w/2, h/2);
x.bezierCurveTo (w*(1-0.02), h*(1-0.4),
w*(1-0.4), h*(1+0.02),
w*(1-0.95), h*(1-0.05));
x.stroke();
})();
svg, canvas {
width: 3em;
height: 3em;
}
svg {
vertical-align: text-top;
stroke: black;
stroke-width: 0.1;
fill: none;
}
canvas {
vertical-align: text-bottom;
}
div {
float: left;
}
<div><svg viewBox="-1 -1 2 2"></svg>VG</div>
<div>CANVA<canvas></canvas></div>
As you can see the result is almost the same, but the JavaScript code is completely different.
SVG is created with the DOM API using createElement, setAttribute and appendChild. All graphics are in the attribute strings. SVG has more powerful primitives. The CANVAS for example has nothing equivalent to the SVG arc path. The CANVAS example tries to emulate the SVG arc with a Bezier curve. In SVG you can reuse elements in order to transform them. In the CANVAS you can not reuse elements. Instead you have to write a JavaScript function in order to call it twice. SVG has a viewBox which allows to use normalized coordinates, which simplifies rotations. In the CANVAS you have to calculate the coordinates yourself based of the clientWidth and clientHeight. And you can style all SVG elements with CSS. In the CANVAS you can not style anything with CSS. Because SVG is a DOM, you can assign event handlers to all SVG elements. The elements in the CANVAS have no DOM and no DOM event handlers.
But on the other hand the CANVAS code is much easier to read. You do not need to care about XML name spaces. And you can directly call the graphics functions, because you do not need to build a DOM.
The lesson is clear: if you quickly want to draw some graphics, use the CANVAS. If you need to share the graphics, like to style it with CSS or want to use DOM event handlers in your graphics, build an SVG.
adding to the above points:
SVG is lightweight for transferring over web when compared to JPEG,GIF etc and also it scale extremely when resized without loosing the Quality.
SVG
It is Object Model-based.
Is suitable for using large rendering areas.
SVG provides any support for event handlers .
Modification is allowed through script and CSS.
SVG has Better scalability
SVG is Vector based (composed of shapes).
SVG is not suitable for Games graphics.
SVG does not depend on resolution.
SVG is capable for API animation.
SVG is suitable for printing with high quality and any resolution.
Canvas elements
It is pixel based.
Is suitable for using small rendering
Canvas does not provide any recourse for event handlers.
Modification is allowed through script only.
Canvas has poor scalability.
Canvas is Raster based (composed of a pixel).
Canvas is suitable for games graphics.
Canvas is completely dependent on resolution.
Canvas has no any API for animation.
Canvas is not suitable for printing high quality and high resolution.