First off I want to point out that I'm very new to the ExtJs library. I want to create an image through the use of some drawing/canvas API. The image I want to create is similar to the below image.
I'm wondering if this is possible through javascript/Extjs because I haven't been able to find anything online that makes this clear. If you can think of a different kind of approach I would appreciate that as well.
I don't know of a canvas API for Ext. But you can easily use the canvas API with Ext. I fiddled it.
Markup:
<canvas id="c1"></canvas>
JavaScript:
Ext.onReady(function() {
draw(document.getElementById('c1'));
});
function draw(el) {
var canvas = el;
var ctx = canvas.getContext("2d");
ctx.strokeRect(0, 0, 50, 200);
for(var y = 10; y < 200; y += 10){
ctx.moveTo(0, y);
ctx.lineTo(25, y);
}
ctx.stroke();
ctx.closePath();
}
As far as I know ExtJS 3.x does not have any API that would facilitate canvas drawing. As Josiah says, you need to stick with plain JavaScript API for that, but you can still use ExtJS to manage your Elements and Components.
Related
I'm using rot-js to draw a grid with hexagons and want to add triangles and other shapes to the canvas. I've tried acting on display.getContainer() but that's not working. What needs to be done to get this to work?
Setting ctx.globalCompositeOperation = "xor", I'm able to see the objects being drawn (but the colors are all wrong).
Setting ctx.globalAlpha = .8 also allows everything to be visible to an extent so I'm thinking this has something to do with layers.
If I work directly on an existing canvas element, drawing works fine.
Hard to tell for sure since you didn't provide anything about what you are actually doing, but given the description, I'll guess you are not waiting for the next frame before doing your own drawings over the ones made by the library.
The library stacks all its rendering operations in a requestAnimationFrame callback, so if you do it before, your drawings will be covered by the lib's ones.
To workaround this, simply wrap your own drawing operations in a requestAnimationFrame callback, it will get stacked after the ones of the lib, and will get drawn on top.
const display = new ROT.Display();
const canvas = display.getContainer();
const ctx = canvas.getContext('2d');
document.body.appendChild(canvas);
// async calls
display.draw(5, 4, "#");
display.draw(15, 4, "%", "#0f0");
display.draw(25, 4, "#", "#f00", "#009");
// end async calls
// this will get covered
ctx.fillStyle = 'red';
ctx.fillRect(20,20,40,40);
// wait next frame
requestAnimationFrame(() => {
ctx.fillStyle = 'green';
ctx.fillRect(120,20,40,40);
})
<script src="https://cdn.jsdelivr.net/npm/rot-js"></script>
I am attempting to use a chrome extension to take a screenshot of the current page, and then draw some shapes on it. After I have done that to the image, I turn the whole thing into a canvas that way it is all together, like the divs I have drawn on it are now baked into the 'image', and they are one in the same. After doing this, I want to turn the canvas back into a png image I can use to push to a service I have, but when I go to use the canvas.toDataURL() in order to do so, the image source that it creates is completely transparent. If I do it as a jpeg, it is completely black.
I read something about the canvas being 'dirtied' because I have drawn an image to it, and that this won't work in Chrome, but that doesn't make sense to me as I have gotten it to work before, but I am unable to use my previous method. Below is the code snippet that isn't working. I am just making a canvas element, and then I am drawing an image before that.
var passes = rectangles.length;
var run = 0;
var context = hiDefCanvas.getContext('2d');
while (run < passes) {
var rect = rectangles[run];
// Set the stroke and fill color
context.strokeStyle = 'rgba(0,255,130,0.7)';
context.fillStyle = 'rgba(0,0,255,0.1)';
context.rect(rect.left, rect.top, rect.width, rect.height);
context.setLineDash([2,1]);
context.lineWidth = 2;
run++;
} // end of the while loop
screencapImage.className = 'hide';
context.fill();
context.stroke();
console.log(hiDefCanvas.toDataURL());
And the image data that it returns is: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACWAAAAVGCAYAAAAaGIAxAAAgAElEQ…ECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQBVKBUe32pNYAAAAAElFTkSuQmCC which is a blank, transparent image.
Is there something special I need to do with Chrome? Is there something that I am missing? Thanks, I appreciate the time and help.
Had the same problem, and found the solution here:
https://bugzilla.mozilla.org/show_bug.cgi?id=749824
"I can confirm, that it works if you set preserveDrawingBuffer.
var glContextAttributes = { preserveDrawingBuffer: true };
var gl = canvas.getContext("experimental-webgl", glContextAttributes);"
After getting the context with preserveDrawingBuffer, toDataURL just works as expected, no completely transparent or black image.
Having a similar problem I found a solution, thanks to the following post
https://github.com/iddan/react-native-canvas/issues/29.
These methods return a promise, so you would need to wait for it to resolve before the variable can be populated.
My solution was to set asyn function and await for the result:
const canvas = <HTMLCanvasElement>document.getElementById("myCanvas")[0];
let ctx = canvas.getContext('2d');
let img = new Image();
img.onload = async (e) => { ctx.drawImage(img, 0, 0); ctx.font = "165px Arial";ctx.fillStyle = "white"; b64Code = await (<any>canvas).toDataURL(); }
I'm trying to build up an image using BitmapData and use that image as a spritesheet but I think I'm missing something.
I'm doing this in my preload...
oBitmapData = game.add.bitmapData(tileWidth * 2, tileHeight);
oBitmapData.ctx.fillStyle = 'blue';
oBitmapData.ctx.fillRect(0,0,tileWidth, tileHeight);
oBitmapData.ctx.fillStyle = 'red';
oBitmapData.ctx.fillRect(tileWidth,0,tileWidth, tileHeight);
oSpriteSheet = game.load.spritesheet(tiles[key].name + 'Sheet', oBitmapData, tileWidth, tileHeight);
And then this elsewhere...
game.add.sprite(x, y, tiles[key].name + 'Sheet', 0, tilesGroup);
I get the following error when running the code
Uncaught TypeError: url.match is not a function
Could someone steer me in the right direction please?
To add a bitmapdata as a spritesheet to phaser:
game.cache.addSpriteSheet('key',null,bitmapdata.canvas, framewidth, frameheight);
The spritesheet() function can only take a url image not a bitmapData object, see documentation, that is causing your error.
And creating a sprite sheet from bitmapdata is not supported by the framework AFAIK, at least according to this forum thread.
I am using sketch.js to enable a user to draw something on the canvas while the page is live.
I wanted to know if it would be possible to allow the user to draw a shape and then fill it with some color while the program is running
From what I read on the site, this script allows you only to free sketch something, not to draw specific shapes. If you'd like to draw a shape to the canvas you should use EaselJS
var graphics = new createjs.Graphics().beginFill("#ff0000").drawRect(0, 0, 100, 100);
var shape = new createjs.Shape(graphics);
Or you could use directly the canvas, without EaselJS
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillRect(20,20,150,100);
I am a beginner at HTML5, Jquery/JavaScript.
I am attempting to create a canvas (sort of like windows paint application) and I am looking at other users sample functions/code to see whats it going on and attempt to re-create it.
$(function(){
var paint = new Paint($('#surface').get(0));
// Setup line template
var templateLine = new Paint($('#toolbar #line').get(0), {'readonly': true});
templateLine.shape = new Line([10, 10], [50, 50]);
templateLine.place(templateLine.shape);
I am unsure what is going on here. I know this new Paint is not an internal built-in function. What is it?
Secondly whats the difference between this and
$( document).ready(function(){
var canvas = $("#canvas").get(0);
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
// Choose a color
ctx.fillStyle = "black";
ctx.strokeStyle = color;
ctx.fillRect(0, 0, 50, 50);
} else {
// Browser doesn't support CANVAS
}
});
Help!!!
Well, first off, the code you're looking at in the beginning of your question was probably using some canvas library or API, but that is not the vanilla HTML5 Canvas API, making it completely different from what you've written below, even if they have the same output (although it doesn't look like they do).
Secondly, color is not defined, so unless that's defined in your code somewhere else, your code's not going to work. Otherwise, your code will draw a black rectangle in the corner of the canvas with the stroke color of whatever color is.