ChatGPT-4o with canvas : Your Thoughts and Experience

One of the core issues with Canvas is just that gpt-4o isn’t that good at coding. Both o1 and Claude can write significantly better code out of the box.

I do like the code review features. This isn’t replacing VSCode for me anytime soon but it’s interesting.

3 Likes

On a side note, has anyone else noticed that using o1 and 4o in the same chat seems to improve 4o’s outputs? (Yet to try o1 and 4o-canvas together, but may be worth experimenting with)
My theory is that the way o1 responds acts a bit like prompt engineering, providing subtle cues to 4o that otherwise aren’t present.

2 Likes

Perhaps this is related to our tendency to infer expertise from limited samples (see the “law of small numbers”)—which is to say, if a model is “good” at certain parts of coding, but “bad” at others, we tend to assume it is “bad” overall, which is subjective and context-dependent.

It also raises questions about how we compare human coding to that of LLMs… for example, we can usually assume that someone that displays competency will avoid common pitfalls, and in many cases it would be reasonable to do so, however, LLMs can have considerable depth of ‘knowledge’ in one particular instance, but lack it in adjacent instances (e.g. insufficient or flawed training data, lack of contextual understanding, etc., leading to uneven performance).

Like most things it’s complicated, but I’m curious what others think about this.

errror: f2w9a2b63ansnf40.js:21 Couldn’t find any way to convert unist node of type “code” to a ProseMirror node.

canvas failed to render code blocks with the above issue for 2 days.

hi, I would like to report that canvas is not showing the code snippets when generating a tutorial. I think it’s a bug. Are you also experiencing this?

1 Like

Where do you access it? Is it part of the api platform for beta testing also? I guess its probably like the memory function and other things that they will roll out in batches to chatgpt plus customers. You’d really think as a beta they would roll it out to developers within the API platform vs consumers right? Def wanna check it out it but I am skeptical. i don’t see how it would have any advantage over just using an openAI/chatgpt integrated VS Code plugin or whatever you alreade code in, since that also has all the other extensions and everything else you need in one place. This seems like basically an extra window to go back and forth betwen since you’ll have to copy and paste back and forth between that and your platform with the rest of your coding resources and references.

I am more interested in finally getting access to Sora and SearchGPT. Idk how they determine who gets access to those restricted betas but I certainly never get picked haha Probably based on activity in the forum more than anything which I barely use other than to search for answers to questions in the old threads.

2 Likes

I asked the same question, here’s the answer :slight_smile:

4 Likes

Same experience.
The canvas is a good way to deal with coding.

What I don’t like is the text writer gimmick. It might have been funny at first to make it seem like GPT is a human writing a text for us, but we all know the text is available as a whole. Waiting until the text is fully written is just annoying and should be something we can turn off. For coding, it would be useful if the software could simply show which lines were changed, with an option to display how, using a Diff.
I also started experiencing hallucinations after a while. After a certain number of cycles, GPT sometimes completely destroys the code that was already developed. It couldn’t translate the comments and often ignored instructions that were given or only followed them occasionally. Many try-and-error cycles are necessary just to create relatively simple code. GPT usually knows why something doesn’t work, but it doesn’t think the code through completely the first time. These try-and-error cycles are exactly what we’re trying to avoid with an LLM, especially when I’m trying to develop code in a language I don’t particularly master.
So, there are still some corrections needed.

Using LLMs as a code-writing assistant is one of the most useful areas for me. If GPT could better think through the code and we no longer needed 20 cycles to create a simple code, it would greatly speed up the work.
So, first of all, turn off the text writer gimmick and just highlight the changes. Pay attention to instructions, for example, to actually write comments in English and not forget it again after 5 cycles. Also, better analyze the code before providing a result, that would save energy on both sides.

The canvas was an improvement. :+1:

7 Likes

one first issue for me is convince chatgpt to open canvas editor, lol.
sometimes i ask directly but it can open or refuse. i tried many times last 3 days and its a bit rare to open editor. for coding and for text writing.

another “issue” (comparing to cursor in my case) is i paste a html and a css and ask for a suggestion or new thing, but editor only shows me 1 file, in my case, html, ignoring css (or javascript if provided too). using usual chat windows it can show edits for every file.

rewriting the whole thing every iteration is not that good too.

3 Likes

Well sometimes is good and sometimes is so bad… → fail to edit so many times, after some updates changed code back with no reason… is like a gpt3.5 turbo, forgetting information…

Well, only if Canvas become better than Cursor I will extend my subscription…

4 Likes

I’ve tried using Canva for a few days for a smaller coding project in google script. It starts out quite well - but pretty quickly the canvas bugs out - the code project is 460 lines, but somehow the canvas breaks and won’t show lines after around 290 -/+ 20.

Tried restarting in another window, but there it suddenly swapped randomly between spitting code out in the chat window, and over in the canvas.

For me - its just not useful. The general issue with using gpt to code is the lookback window is just not large enough. You can really only use it to write snippets, and it just doesn’t have enough “memory” to have the complete overview over all the code. Sooner or later when making changes it ends up with a dumpster fire where it introduces more and more bugs across the project.

For snippet writing it’s great. For general coding, not so much, and Canvas is just too buggy for now. It needs a massively larger window/memory, and preferably multiple files at the same time.

2 Likes

It’s very cool when it works.However, last time, Canvas wasn’t working. I kept getting a “Failed to Edit” message with "It looks like there was an issue with formatting the code properly. I asked why, and got this explanation - The “Failed to edit” message means that there was an issue when trying to update the code directly in the canvas where edits are made. This often happens due to errors in formatting or JSON parsing issues during the update process.

If the canvas was working properly, the changes should directly apply to the document you’re working on. However, because of these failures, the code might not be updating there, and I need to manually rewrite the entire code to reflect your changes.Let me rewrite it for you again, ensuring everything is correct:"

I was glad for the explanation, but wished it worked! Although I was in Canvas mode, Canvas never opened. Mac and Chrome.

-Ashley

3 Likes

Modularizing is not an easy thing, but it gets easier the more you do it. The secret is that you have to find logical lines of separation, so that what’s in the module is complete within itself. There are lots of tutorials on this and it would be different for each language/framework, so I won’t try to go into detail, but I do wish you all the luck!

3 Likes

As previously mentioned, I primarily use this as a tool for ideating for writing, but I’ve noticed that I frequently get failed to edit responses if a document is even a little bit long; hell, if the document gets even a little bit long, it won’t save changes made manually to the document like writing new material and delete material.

I do like it doesn’t have the “commit everything to memory” problem I’ve been having with 4o.

1 Like

Just in case anyone runs into a similar issue, some Markdown formatting won’t work (e.g. check boxes), and may show up as missing lines of text.

ChatGPT-4o can fix this, but you need to tell it that a formatting issue is the cause—just saying something like “You missed some text in the ‘x’ section” isn’t enough (it may even hallucinate and add text to other sections instead).

In addition, it “wants” (if you’ll forgive the anthropomorphism) to edit unless you explicitly tell it to pause or hold off editing.

1 Like

That’s canvas

4 Likes

I have been using canvas for writing longer stories and coding.
Feedback from writing stories:
I often ran into the situation that I wanted to continue extensively inside a canvas (by marking somethings inside it and then prompt), but it would open a new canvas, which became frustrating as you can’t delete them and from my experience ChatGPT seems to think you always want to work upon the newest canvas. I even got into a loop with that where ChatGPT would always open a new canvas, no matter what I prompted. At some points ChatGPT would also continue outside of the Canvas. I also had the case where in an attempt to continue, ChatGPT would replace the entire canvas with the continuation of what was written in there, which was not helpful.
And when telling ChatGPT to continue extensively inside a canvas, it just does not do that.

  • Stop ChatGPT from opening new canvases if not told to.
  • You should really be able to delete Canvases.
  • It needs to be easier/more reliable to tell ChatGPT where to continue and how extensive.
  • When typing into a canvas, deleting text or replacing it all together, Chat GPT does not always seem to understand that there is new/changed text.
  • I love how you can edit things inside a Canvas. However, an additional and save to use continue function might be something you should think about.

Feedback from Coding:
Seriously, this is great! I had no larger problems. Sometimes he also here would open a new Canvas where it should not have but that happend only once. I created one canvas per python and html file which seemed most natural for me and ChatGPT was also able to understand links between Canvases, but it was not able to edit two Canvases at the same time, which could come in handy for coding. However we’d need to be able to see both Canvases open simultaneously for that case. Also it would be great if changed lines stay highlighted for a while, as sometimes ChatGPT edits something without scrolling there and then you’d ask your self what it edited and how exactly. This also is not always 100% clear from the comment in the prompt window.

  • Stop ChatGPT from opening new canvases if not told to.
  • Enable editing and opening two (or more) Canvases at the same time
  • Highlight changed code.
6 Likes

Here is an 8 prompt process in canvas for a very simple p5.js game (And the resulting game) copy and paste to https://editor.p5js.org

Requests:

make a story mode rpg game in p5.js canvas

create the forest

only create everything in code, not file maps

expand the world size

add the magical herb

create an inventory

make the quest complete when the player has herb and is talking to the quest giver

make the quest giver be outside of the dark forest

'''

'''
Code In P5.js:

let player;
let npc;
let dialogueBox;
let dialogueIndex = 0;
let dialogues = [
  "Hello, traveler!",
  "I have a quest for you.",
  "Head to the forest and find the magical herb.",
  "Thank you for bringing the herb! Quest complete!"
];
let forest;
let magicalHerb;
let worldWidth = 1600;
let worldHeight = 1200;
let inventory = [];
let questComplete = false;

function setup() {
  createCanvas(800, 600);
  player = new Player(50, 50);
  npc = new NPC(300, 200); // Place NPC outside of the forest
  dialogueBox = new DialogueBox();
  forest = new Forest();
  magicalHerb = new MagicalHerb(random(800, worldWidth), random(400, worldHeight)); // Place the herb deeper into the forest
}

function draw() {
  background(150, 200, 100); // Replace map image with a colored background to represent the map

  push();
  translate(width / 2 - player.x, height / 2 - player.y);

  forest.display();
  magicalHerb.display();
  player.move();
  player.display();
  npc.display();

  pop();

  // Check for interaction
  if (dist(player.x, player.y, npc.x, npc.y) < 50) {
    dialogueBox.display();
  }

  // Check if player found the magical herb
  if (dist(player.x, player.y, magicalHerb.x, magicalHerb.y) < 30 && !magicalHerb.collected) {
    fill(0);
    textSize(20);
    textAlign(CENTER, CENTER);
    text("You found the magical herb! Press 'E' to collect.", width / 2, height / 2);
  }

  // Display inventory
  displayInventory();
}

function keyPressed() {
  if (key === ' ') {
    // Interact with NPC
    if (dist(player.x, player.y, npc.x, npc.y) < 50) {
      if (inventory.includes("Magical Herb") && !questComplete) {
        dialogueIndex = 3; // Quest complete dialogue
        questComplete = true;
      } else {
        dialogueIndex++;
        if (dialogueIndex >= dialogues.length - 1 && !questComplete) {
          dialogueIndex = 0; // End of dialogues if quest not complete
        }
      }
    }
  }
  if (key === 'e' || key === 'E') {
    // Collect the magical herb
    if (dist(player.x, player.y, magicalHerb.x, magicalHerb.y) < 30 && !magicalHerb.collected) {
      inventory.push("Magical Herb");
      magicalHerb.collected = true;
    }
  }
}

function displayInventory() {
  fill(255);
  rect(10, 10, 200, 100);
  fill(0);
  textSize(16);
  textAlign(LEFT, TOP);
  text("Inventory:", 20, 20);
  for (let i = 0; i < inventory.length; i++) {
    text(`- ${inventory[i]}`, 20, 40 + i * 20);
  }
}

class Player {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = 30;
  }

  move() {
    if (keyIsDown(LEFT_ARROW)) {
      this.x = max(0, this.x - 2);
    }
    if (keyIsDown(RIGHT_ARROW)) {
      this.x = min(worldWidth, this.x + 2);
    }
    if (keyIsDown(UP_ARROW)) {
      this.y = max(0, this.y - 2);
    }
    if (keyIsDown(DOWN_ARROW)) {
      this.y = min(worldHeight, this.y + 2);
    }
  }

  display() {
    fill(0, 0, 255);
    ellipse(this.x, this.y, this.size);
  }
}

class NPC {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = 40;
  }

  display() {
    fill(255, 0, 0);
    ellipse(this.x, this.y, this.size);
  }
}

class DialogueBox {
  display() {
    fill(255);
    rect(50, height - 150, width - 100, 100);
    fill(0);
    textSize(20);
    textAlign(LEFT, TOP);
    text(dialogues[dialogueIndex], 70, height - 130);
  }
}

class Forest {
  constructor() {
    this.trees = [];
    for (let i = 0; i < 200; i++) {
      this.trees.push(new Tree(random(800, worldWidth), random(400, worldHeight))); // Trees are placed deeper in the forest
    }
  }

  display() {
    for (let tree of this.trees) {
      tree.display();
    }
  }
}

class Tree {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = random(40, 80);
  }

  display() {
    fill(34, 139, 34);
    ellipse(this.x, this.y, this.size);
  }
}

class MagicalHerb {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = 20;
    this.collected = false;
  }

  display() {
    if (!this.collected) {
      fill(0, 255, 0);
      ellipse(this.x, this.y, this.size);
    }
  }
}
2 Likes

Is any one else being effectively forced into using (and only using) Canvas?

All my other options have disappeared!

My thoughts are that:

  • For code generation (I’ve been doing lots and lots of that, mostly for basic Python GUIs) this is a nice feature!
  • It’s quite buggy. Given that I seem to have now way *not * to use it currently I’m having to do some non-code-generation prompting with Canvas today. I asked GPT (for the first time!) to create an outline for a blog I want to write. It handled that as well as I expected. But when I asked for title suggestions, rather than simply give those back to me in chat, it annotated them as comments on the doc (I guess because it’s made the incorrect determination that I want to use this all the time now for everything!). Most of them weren’t “relevant” and a simple list of a few title ideas would have been much, much more helpful.

Overall, I think it’s a nice feature.

However, I think its utility will be in it being used very deliberately and carefully and it’s absolutely unreasonable to force it as the only option perhaps to accelerate the feedback process in its Beta (FWIW, I’m a Pro subscriber).

For code generation (develop this code, then help me debug) it makes much more sense to use Canvas.

For most other things, though, I’m finding it more of a nuisance than a value-add.

I find it frustrating you have to copy and paste html + javascript into a separate file and run it separately in a browser window?

After all the seamlessness of the early part of the workflow, this is really jarring.

Has anyone found a way to streamline that or do we need OpenAI to add some kind of even temp hosting for html files so they can be seamlessly spawned in a new tab and have that hosted page updated.